css3实现图片翻转 |css 该写竖屏代码样式

.flip-box{
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
perspective: 1000px;
}
.flip-box-inner{
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner{
transform: rotateY(180deg);
}
.flip-box-front, .flip-box-back{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-box-front{
background: url(front.jpg) no-repeat;
background-size: cover;
}
.flip-box-back{
background: url(back.jpg) no-repeat;
background-size: cover;
transform: rotateY(180deg);
}

上述代码将一个 div 包裹了两个 div，分别作为前面和后面的图片。首先，使用了 perspective 属性来设置透视距离，这样可以产生三维效果。然后，使用了 transition 属性来设置过渡效果，当鼠标悬停在图片上时，将图片沿 Y 轴旋转 180 度，达到翻转的效果。为了防止翻转时图片内部也同时翻转，需要使用 backface-visibility 属性来隐藏背面。

最后，通过设置 transform 属性中的 preserve-3d 值，让翻转效果更自然，并且在不同的浏览器中具有更好的兼容性。使用 CSS3 实现图片翻转，让网页设计更加出彩，也能够满足用户对于美观和体验的要求。