目前这个属性支持两个值,兼容性并不是很好
1、backface-visibility:visible
默认值,背面朝向用户时可见
2、backface-visibility:hidden
背面朝向用户时不可见。
下面是各浏览器的兼容性![在这里插入图片描述](https://img-blog.csdnimg.cn/510a4a83c6a940a38301b6e096883738.webp?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAUVlU5Li2,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
卡片翻转特效的实现过程
![在这里插入图片描述](https://img-blog.csdnimg.cn/4f9447f8c9864555bd84c28ea2e96584.gif#pic_center)
一、创建一个容器
<div class="card">
</div>
因为是翻转卡片,所以为了保证正面反面可以重叠,我们需要把正反面放在同一个容器内并为父容器设置position: relative;
.card {
width: 720px;
height: 720px;
position: relative;
}