我使用css动画创建了一个3D旋转立方体,它在Mozilla中运行良好,但是当我在webkit浏览器中运行它时,我有旋转动画,但是这6个图像不会像他们应该那样翻译。如果我禁用动画但是,6个图像按要求翻译,我有一个立方体。有没有人遇到过这个?
@-webkit-keyframes rotate{
from {-webkit-transform: rotateX(0deg) rotateZ(0deg);}
to {-webkit-transform: rotateX(360deg) rotateZ(360deg);}
}
@-moz-keyframes rotate{
from {-moz-transform: rotateX(0deg) rotateZ(0deg);}
to {-moz-transform: rotateX(360deg) rotateZ(360deg);}
}
.object{
transform-style:preserve-3d;
width:300px;
height:300px;
top: 150px;
margin:0 auto;
position:absolute;
-moz-animation-name: rotate;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-name: rotate;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;}
这是多维数据集http://jsfiddle.net/timwilks13/SRU34/1/的jsfiddle 托管版本http://www.bettondesignwork.co.uk/tim/css
答案 0 :(得分:1)
添加:
.object{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
/* ..*/
}