CSS3实现卡片翻转效果

效果图是两种图片鼠标放上去的时候进行反转展示第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>