使用rotateY（）css翻转过渡时，有什么方法可以阻止内容镜像？

Question

当使用rotateY（）css翻转动画时，我动态设置将要显示到图像的边的背景，但是因为所有内容都被翻转，所以图像是向后的。我在里面创建新元素并将其内容/背景设置为图像，但它们也会被翻转。任何解决方案？

更多信息 我基本上是在做这个http://www.inserthtml.com/2011/09/css3-3d-transforms-keyframes/，但是当另一个动画完成使用时我会激活该动画          boardCard.addEventListener（ 'transitionend'，功能（事件{boardCard.style.MozTransform = '旋转（-180deg）';

此时我还想动态设置背景哪个工作正常，除了里面的所有内容都被翻转，所以图像错误。

Answer 1

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

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

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