简单的图片hover翻转效果

html

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翻转效果