CSS3实现卡片翻转效果

CSS实现图片翻转效果

原创已于 2022-12-30 19:46:32 修改 · 414 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #前端

于 2022-12-30 19:45:54 首次发布

这篇博客通过CSS展示了如何创建一个交互式的效果，当鼠标悬停在图片上时，图片会进行180度翻转，展示第二张图片。主要涉及的CSS属性包括perspective、transform-style、transform和transition。

效果图是两种图片鼠标放上去的时候进行反转展示第2张图片

css

  .big{
                        width: 400px;
                        height: 400px;
                        margin: 100px auto;
                    }
                    .main{
                        position: relative;
                        width: 100%;
                        height: 100%;
                        /*下面两个属性都是必备的*/
                        perspective: 800px;
                        transform-style: preserve-3d;
                        transition: 2s linear;
                    }
                    .main:hover{
                        transform: rotateY(180deg);
                    }
                    .first{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                    }
                    .second{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        backface-visibility: hidden;
                transform: rotateY(180deg);
                    }
                    img{
                        width: 100%;
                        height: 100%;
                    }

html

 <div class="big">
                <div class="main">
                    <div class="first">
                        <img src="img/微信图片_20220723094615.jpg" alt="">
                    </div>
                    <div class="second">
						<img src="img/微信图片_20220606103330.jpg" alt="">
                    </div>
                </div>
            </div>