1

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

ここにキューブの jsfiddle がありますhttp://jsfiddle.net/timwilks13/SRU34/1/ そしてホストされたバージョンhttp://www.bettondesignwork.co.uk/tim/css

4

1 に答える 1

1

追加：

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

更新されたフィドル

于 2013-03-28T11:46:05.163 に答える