错误的思路
- 先看效果图(这里准备两张相同的图片)
- 刚开始的思路:两张层叠的图片,旋转第一张,在旋转第二张。通过时间差来实现,然后出现了bug,以为是层级问题,但是背后一张回去的时候显示
- HTML结构
<div>
<img class="a" src="img/hou.svg" alt="">
<img class="b" src="img/qian.svg" alt="">
</div>
div{
width: 224px;
height: 224px;
position: relative;
margin: 50px auto;
}
div img{
position: absolute;
left: 0;
top: 0;
}
.b{
transition: all 1s linear;
}
.a{
transition: all 2s linear;
}
div:hover .b{
transform: rotateY(90deg);
}
div:hover .a{
/* transition-delay: 1s; */
transform: rotateY(180deg);
}
正确的解决方式
div{
position: relative;
margin: 100px auto;
width: 224px;
height: 224px;
}
div img{
position: absolute;
left: 0;
top: 0;
transition: all 2s;
}
div img:first-child{
z-index: 1;
backface-visibility: hidden;
}
div:hover img{
transform: rotateY(180deg);
}
backface-visibility
指定当元素背面朝向观察者时是否可见。元素的背面总是透明的,当其朝向观察者时,显示正面的镜像。在某些情况下,我们不希望元素内容在背面可见,比如实现翻牌效果。因为2D变换无透视效果,故该属性对2D变换无效。
指定元素背面是否可见,可为以下值:
visible 表示背面可见,允许显示正面的镜像。
hidden 表示背面不可见。
正方形透视案例