带有变换旋转的 CSS 过渡在 Chrome 中无法正常工作

Question

我有一些 div 元素，我尝试在透视图中移动和旋转。

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

代码在 FF 24.0 中运行良好，但在 Chrome 30.0.1599.101 中存在一些问题。有趣的是，我在红色 div 的过渡中实现了我想要的，但黑色 div 的过渡很奇怪。它开始旋转，但方向不正确且不平滑，而是在过渡结束时旋转。

代码：

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 和透视图放在任何地方 - 它只需要放在公共父元素（主体）中。您还需要在体内有一个共同的变换原点，所以一切都得到相同的视角。 #right 没有 -webkit 版本的转换。当您解决这些问题时，您会在 Chrome 中获得合理的行为 - 尽管您可能应该调整转换原点。

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