如何实现图标翻转180度后显示另一张图片

最新推荐文章于 2023-05-11 06:28:03 发布

原创最新推荐文章于 2023-05-11 06:28:03 发布 · 9.7k 阅读

8 ·

CC 4.0 BY-SA版权

1.html结构:

<div class="test">
        <img class="one" src="./images/hotlink01.png" alt="">
        <img class="two" src="./images/hotlink01_h.png" alt="">
    </div>

当鼠标移入外层的div盒子子时,图片会翻转180度,并且显示图片的背面(即第二张图片),效果如下

2. css样式:

<style>
        .test {
            width: 103px;
            height: 103px;
            margin: 100px auto;
            position: relative;
        }
        img {
            position: absolute;
            transition: all 1s;
        }
        .test:hover img {
            transform: rotateY(180deg); 
        }
        img.one {
            /* 提高图片一的层级 */
            z-index: 9;
            /* 当元素背面显示时,隐藏起来 */
             backface-visibility: hidden;
        }
       
    </style>