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

Question

I have some div elements that i try to move and rotate in perspective.

fiddle: http://fiddle.jshell.net/nu6EA/

The code works fine in FF 24.0, but have some issues with Chrome 30.0.1599.101. Its interesting that i achieved what i wanted in the transition of the red colored div, but that of the black one is weird. It starts to rotate but it does not in the right direction and not smoothly, but rotates at the end of the transition.

Code:

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;
}

I would like also to know if this is the right way of doing what expected from the fiddle demo.

Answer 1

You don't have to put preserve-3d and perspective everywhere - it only needs to go in the common parent element (body). You also need a common transform origin in the body, so everything is getting the same perspective. #right doesn't have a -webkit version of transform. When you fix these problems you get reasonable behavior in Chrome - although you should probably adjust the transform origin.

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