两面翻转----背面隐藏（backface-visibility:hidden）-CSDN博客

本文介绍如何使用CSS的backface-visibility属性和transform旋转实现图片的两面翻转效果，通过设置div内的两张图片，并利用:hover伪类触发翻转动画。

实现图片的两面翻转,效果如下图

在这里插入图片描述
主要是使用背面隐藏(backface-visibility: hidden;) 实现图片的两面翻转

首先在body中一个 div 中放置两个图片 img

<div>
	<img src="images/1.jpg" alt="">
    <img src="images/2.jpg" alt="">
</div>

下面设置div的尺寸和图片一致,由于图片img需要脱离文档流(absolute),div要relative;
子绝父相

div {
            width: 250px;
            height: 170px;
            margin: 100px auto;
            position: relative;
            border: 1px solid pink;
        }

设置img的样式,使用绝对定位(position: absolute),设置动画过渡transition

div img {
            width: 100%;
            height: 100%;
            position: absolute;
            transition: transform ease 1s;/*动画的过渡*/
        }

第一个img设为 z-index=1,使第一个img在上面,然后使用背面隐藏(backface-visibility: hidden;) 让第二个img实现隐藏

div img:first-child {
            z-index: 1;
            backface-visibility: hidden;/*背面隐藏*/
       }

然后使用伪类 :hover鼠标经过使img翻转180°

div:hover img {
            transform: rotateY(180deg);
        }

效果如下：
在这里插入图片描述