0

要素の -webkit-transform: rotateX() をアニメーション化しながら、要素が -webkit-transform: rotate() プロパティをそのまま維持できるようにしたい。次のコードを検討してください。

@-webkit-keyframes anim {
    from { -webkit-transform: rotateX(0); }
    to { -webkit-transform: rotateX(45deg); }
}

.target {
    -webkit-animation: anim .5s infinite alternate linear;
}

.target.one {
    -webkit-transform: rotate(45deg);
}

.target.two {
    -webkit-transform: rotate(-45deg);
}

このシナリオでは、ターゲット 1 と 2 が正しく回転し始めますが、アニメーションが -webkit-transform: rotateX() を適用すると、それらの回転はオーバーライドされます。

-webkit-transform のrotateX関数のみをアニメーション化するにはどうすればよいですか?

4

1 に答える 1

0

これを実現する最も簡単な方法は、基本変換 (-45/45) が適用されたラッパー div を使用し、ラップされた div にアニメーション クラスを適用することです。

于 2012-07-01T21:58:00.593 に答える