旋轉Y和透視動畫在Chrome中無法正常工作？

我想在y方向上旋轉圖像。我的代碼如下旋轉Y和透視動畫在Chrome中無法正常工作？

的js部分

$(function() { 

     $("#content").click(function() { 
      var css = { 
       'transform': 'perspective(2000px) rotateY(-25deg)', 
        'transition-duration': '500ms' 
      }; 
      $("#content").css(css); 
     }); 
    });

CSS部分

#mainpage{ 
    height: 100%; 
    width:100%; 
    position: absolute; 
    top:0; 
    left:0; 

    } 
    #menubar{ 
    height: 100%; 
    width:100px; 
    position: absolute; 
    top:0; 
    left:0; 
    background: #FF0000; 
    } 
    #content{ 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top:0; 
    left:0; 
    background-image:url(images/clubs/Informals.jpg); 
    background-size:100% 100%; 
    }

HTML部分

<div id="mainpage"> 
<div id="menubar"></div> 
<div id="content"></div> 
</div>

的代碼在Firefox正常使用。但是在chrome中，透視效果只有在動畫完成後纔會出現。在IE動畫不起作用，它只是改變到最後的位置。我嘗試添加前綴「-webkit-」，但仍遇到同樣的問題。

來源

2013-08-23 Kenneth Joseph Paul

由於的jsfiddle將有助於診斷問題 – Vector

您需要喲具體-webkit-使用的瀏覽器爲transform

transform:rotate(7deg); 
-ms-transform:rotate(7deg); /* IE 9 */ 
-webkit-transform:rotate(7deg); /* Safari and Chrome */

爲了防止您的jQuery成爲unmanagable我可能是有益的把一個類中的這些值，然後只需添加class而非css

來源

2013-08-23 20:58:07 Vector

我添加了-webkit-前綴，它仍然不能正常工作 –

有很多你的聲明中的錯誤，我很驚訝，它工作在其他瀏覽器。這是一個明確的方式來聲明他們http://jsfiddle.net/kevinPHPkevin/dQ7J7/。「透視圖」不使用「px」。除非另有說明，否則'旋轉'具有'Y'的默認值。 – Vector

我想要做的是一個css3動畫。在上面的小提琴中，我添加了過渡css屬性，但它仍然不起作用 –

旋轉Y和透視動畫在Chrome中無法正常工作？

回答

相關問題