0

rotateY() css フリップ アニメーションを使用する場合、画像に表示される側の背景を動的に設定していますが、すべてが反転されるため、画像は逆になります。内部に新しい要素を作成し、その内容/背景を画像に設定しますが、それらも反転します。解決策はありますか？

詳細情報私は基本的にこれを行っています http://www.inserthtml.com/2011/09/css3-3d-transforms-keyframes/しかし、別のアニメーションが boardCard.addEventListener('transitionend', function(event{boardCard.style.MozTransform='rotateY(-180deg)';

この時点で、内部のすべてが反転して画像が間違っていることを除いて、正常に機能する背景も動的に設定したいと考えています。

4

1 に答える 1

1

あなたがする必要があるのは、反転された要素の裏側をすでに反転させておくことです。これにより、メインの要素を裏返すと、裏側の要素が実際に通常の向きに戻されます。

これについては、本当に良い例とチュートリアルがあります: http://desandro.github.com/3dtransforms/docs/card-flip.html

transform: rotateY( 180deg ); が追加されていることがわかります。.flipped クラスをメイン カードに追加すると、カードの .back 面が通常の向きに反転します。

于 2012-09-10T18:05:18.307 に答える