带有变换旋转的Css转换在Chrome中无法正常工作
我尝试在透视图中移动和旋转一些div元素 小提琴: 该代码在FF 24.0中运行良好,但在Chrome 30.0.1599.101中存在一些问题。有趣的是,我在红色div的过渡中实现了我想要的,但是黑色div的过渡很奇怪。它开始旋转,但方向不正确且不平滑,但在过渡结束时旋转 代码: HTML:带有变换旋转的Css转换在Chrome中无法正常工作,css,google-chrome,css-transitions,css-transforms,Css,Google Chrome,Css Transitions,Css Transforms,我尝试在透视图中移动和旋转一些div元素 小提琴: 该代码在FF 24.0中运行良好,但在Chrome 30.0.1599.101中存在一些问题。有趣的是,我在红色div的过渡中实现了我想要的,但是黑色div的过渡很奇怪。它开始旋转,但方向不正确且不平滑,但在过渡结束时旋转 代码: HTML: JS: CSS: 我还想知道这是否是实现小提琴演示预期效果的正确方法。您不必将preserve-3d和perspective放在任何地方-它只需要放在公共父元素(主体)中。在主体中还需要一个公共的变换
JS:
CSS:
我还想知道这是否是实现小提琴演示预期效果的正确方法。您不必将preserve-3d和perspective放在任何地方-它只需要放在公共父元素(主体)中。在主体中还需要一个公共的变换原点,以便所有对象都获得相同的透视图#right没有transform的-webkit版本。当您解决这些问题时,您可以在Chrome中获得合理的行为-尽管您可能应该调整变换原点
非常感谢!它现在也可以在Chrome和Firefox上正常工作。我会解决你说的问题。如果您对这些css3属性有什么想法,或者没有常用的,请告诉我一些shim/shiv/polyfill。是否值得尝试填充它们?透视变换没有多边形填充。
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.
});
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;
}