CSS3实现卡片翻转效果

最新推荐文章于 2024-05-15 10:35:35 发布

木木木和小琳琳

最新推荐文章于 2024-05-15 10:35:35 发布

阅读量299

点赞数 1

文章标签： css Powered by 金山文档

本文链接：https://blog.csdn.net/qq_19820589/article/details/129236557

版权

该文章展示了如何使用CSS3的3D转换属性创建一个图片翻转效果。当鼠标悬停在容器上时，主容器会绕Y轴旋转180度，使得第一张图片翻转显示第二张图片，利用backface-visibility属性隐藏背面，实现了平滑的过渡动画。

摘要由CSDN通过智能技术生成

<div class="big">
            <div class="main">
                <div class="first">
                    <img src="img/****1.jpg" alt="">
                </div>
                <div class="second">
                    <img src="img/****2.jpg" alt="">
                </div>
            </div>
        </div>

这里面big盒子是容器，main盒子是用来容乃内外两面

.big {
    width: 400px;
    height: 400px;
    margin: 100px auto;
}

.main {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 800px;
    transform-style: preserve-3d;
    transition: 2s linear;
    /* 3d代码 */
}

.main:hover {
     transform: rotateY(180deg);
}

.first {
     position: absolute;
     width: 100%;
     height: 100%;
}

.second {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
     /*backface-visibility:hidden;属性，
     我们可以使一个元素在翻转之后消失，
     这是可以使用另一个元素放在它的背面，
     从而制作出一种元素翻转之后出现另一个元素的效果。*/
     transform: rotateY(180deg);
}

img {
     width: 100%;
     height: 100%;
}