目前这个属性支持两个值,兼容性并不是很好
1、backface-visibility:visible
默认值,背面朝向用户时可见
2、backface-visibility:hidden
背面朝向用户时不可见。
下面是各浏览器的兼容性
卡片翻转特效的实现过程
一、创建一个容器
<div class="card">
</div>
因为是翻转卡片,所以为了保证正面反面可以重叠,我们需要把正反面放在同一个容器内并为父容器设置position: relative;
.card {
width: 720px;
height: 720px;
position: relative;
}