0

使用 rotateY() css 翻转动画时，我动态设置要显示到图像的一侧的背景，但由于一切都被翻转，图像是向后的。我在内部创建新元素并将它们的内容/背景设置为图像，但它们也会被翻转。有什么解决办法吗？

更多信息我基本上是在做这个http://www.inserthtml.com/2011/09/css3-3d-transforms-keyframes/但是当另一个动画使用 boardCard.addEventListener('transitionend',函数（事件{boardCard.style.MozTransform='rotateY(-180deg)';

在这一点上，我还想动态设置可以正常工作的背景，除了里面的所有东西都被翻转了，所以图像是错误的。

4

1 回答 1

1

你需要做的是让被翻转元素的背面已经被翻转，这样当你翻转主要元素时，背面的元素实际上会被翻转回它们的正常方向。

这里有一个非常好的示例和教程：http: //desandro.github.com/3dtransforms/docs/card-flip.html

你会看到他们添加了 transform: rotateY( 180deg ); 提前到卡片的 .back 面，这样当他们将 .flipped 类添加到主卡片上时，它会将卡片的 .back 面翻转回正常方向。

于 2012-09-10T18:05:18.307 回答