Css轉換旋轉在Chrome中無法正常工作

Question

我有一些div元素，我嘗試移動並旋轉透視圖。

小提琴：http://fiddle.jshell.net/nu6EA/

的代碼工作正常在FF 24.0，但與Chrome的30.0.1599.101一些問題。它的有趣之處在於，我在紅色彩色轉換中取得了我想要的效果，但是黑色轉換效果卻很奇怪。它開始旋轉，但它不在正確的方向並且不平滑，但在過渡結束時旋轉。

代碼：

HTML： <div class="left"></div><div class="center"></div> <div id="right"></div>

JS：

var left = $(".left"); 

left.toggleClass("block"); 

left.animate({ 
    opacity: 1, 
    left: "+=200", 
    height: "200px", 
    top: "0" 
}, 4000, function() { 
    // Animation complete. 
}); 

var center = $(".center"); 

center.toggleClass("go-left"); 
center.animate({ 
    opacity: 0.3, 
    left: "-=200", 
    height: "180px", 
    top: "10px", 
}, 4000, function() { 
    // Animation complete. 
}); 

CSS：

body { 
margin: 55px;} 
.left { 
left: 0; 
opacity: 0.3; 
position: relative; 
float: left; 
width: 200px; 
height: 180px; 
top: 10px; 
background-color: red; 
outline: 1px solid transparent; 
-moz-transform: perspective(600px) rotateY(-45deg); 
-ms-transform: perspective(600px) rotateY(-45deg); 
-o-transform: perspective(600px) rotateY(-45deg); 
-webkit-transform: perspective(600px) rotateY(-45deg); 
transform: perspective(600px) rotateY(-45deg); 
-moz-transition: all 5s; 
-o-transition: all 5s; 
-webkit-transition: all 5s; 
transition: all 5s; 
-webkit-transform-style: preserve-3d; 
transform-style: preserve-3d; 
} 

.block { 
float: left; 
width: 200px; 
position: relative; 
background-color: red; 
outline: 1px solid transparent; 
-moz-transform: perspective(600px) rotateY(0deg); 
-ms-transform: perspective(600px) rotateY(0deg); 
-o-transform: perspective(600px) rotateY(0deg); 
-webkit-transform: perspective(600px) rotateY(0deg); 
transform: perspective(600px) rotateY(0deg); 
} 

.go-left { 
left: 0; 
position: relative; 
float: left; 
width: 200px; 
background-color: black; 
outline: 1px solid transparent; 
-moz-transform: perspective(600px) rotateY(-45deg); 
-ms-transform: perspective(600px) rotateY(-45deg); 
-o-transform: perspective(600px) rotateY(-45deg); 
-webkit-transform: perspective(600px) rotateY(-45deg); 
transform: perspective(600px) rotateY(-45deg); 
/*-moz-transition: all 5s; 
-o-transition: all 5s; 
-webkit-transition: all 5s; 
transition: all 5s; 

-webkit-transform-style: preserve-3d; 
transform-style: preserve-3d;*/ 
} 

.center { 
position: relative; 
height: 200px; 
width: 200px; 
background-color: black; 
float: left; 
outline: 1px solid transparent; 
-moz-transition: all 3s; 
-o-transition: all 3s; 
-webkit-transition: all 3s; 
transition: all 3s; 
-webkit-transform-style: preserve-3d; 
transform-style: preserve-3d; 
} 

#right { 
float: left; 
width: 200px; 
height: 200px; 
background-color: blue; 
transform: perspective(600px) rotateY(135deg); 
outline: 1px solid transparent; 
} 

我想也知道這是做的正確方法從小提琴演示中可以期待什麼。

Answer 1

你不需要將preserve-3d和perspective放在任何地方 - 它只需要進入常見的父元素（body）。你還需要在身體中有一個共同的變換來源，所以一切都得到了相同的視角。 #right沒有-webkit版本的轉換。當你解決這些問題時，你會在Chrome中獲得合理的行爲 - 儘管你應該調整轉換原點。

http://fiddle.jshell.net/fcxjM/