CSS3动画-在'；底面'；动画元素的

我使用CSS3动画使门元素在悬停时打开。如果您查看以下url：

当您将鼠标悬停在方框上时，css动画将开始显示下方的内容

我想修改打开的门的“底面”，你会注意到此时你只看到正面图像的反面

---

是否会对背景图像上的另一个动画进行计时，使其与门“翻转”的点重合？

因此，您要查找的是

背面可见性。将其设置为
.box img

现在在该图像下方添加一个元素，这里我刚刚添加了一个
伪元素
，用
z-index:-1将其定位为绝对值

您也可以将
div
或
图像设置为
.box
的子对象，同样有效


/*您的情感需要CSS*/
.box img{
背面可见性：隐藏；
}
.box：：之前{
内容：''；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景：#FF0；
z指数：-1；
}
/*其余的标记*/
文章{
显示：内联块；
宽度：6em；
身高：6em；
边缘：.5em；
透视图：850px；
}
文章：hover.box{
过渡：放松；
变换：旋转（-97度）；
变换原点：0.50%；
透视原点：0；
}
.盒子{
位置：相对位置；
过渡：全部3秒；
变换原点：0.50%；
文本对齐：居中；
背景尺寸：封面；
盒影：0.40px 0 rgba（0,0,0,15）；
变换样式：保留-3d；
透视图：850px；
光标：指针；
}
.盒子，.礼物{
宽度：100%；
身高：100%；
}
.box img、.present img{
宽度：100%；
身高：100%；
}
.现在{
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
框阴影：0 0 40px 0 rgba（0,0,0,15），插入0 0 30px 20 px rgba（0,0,0,4）；
}
.出示{
显示：块；
宽度：100%；
身高：100%；
}