简单的图片hover翻转效果

html

<div class="transformImg">
            <img class="before" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4251646071,1773737285&fm=26&gp=0.jpg" alt="" />
            <img class="after" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1231723957,2972681918&fm=26&gp=0.jpg" alt="" />
        </div>

css

.transformImg {
                width: 200px;
                height: 200px;
                position: relative;
                transition: all 1s linear;
                transform-style: preserve-3d;
            }
            
            .transformImg img {
                width: 100%;
            }
            
            .before,
            .after {
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
            
            .after {
                transform: rotateY(-180deg);
            }
            
            .transformImg:hover {
                transform: rotateY(180deg);
            }

tip: 主要是利用css3的3d翻转效果