博客

两面翻转—-背面隐藏（backface-visibility:hidden）

  • Post author:
  • Post category:其他


原文链接：https://blog.csdn.net/xiaomohhh/article/details/98633260



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

在这里插入图片描述

主要是使用背面隐藏(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);
        }

效果如下：

在这里插入图片描述

背面图片是反的，暂时没有找到修改的方法