使用css写一个垂直翻转图片的效果 - Riesenzahn - 沸点 - 掘金

1年前

使用css写一个垂直翻转图片的效果
"```css
.flip-container {
perspective: 1000px;
}

.flip-container:hover .flipper {
transform: rotateY(180deg);
}

.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}

.front, .back {
width: 200px;
height: 200px;
backface-visibility: hidden;
position: absolute;
}

.front {
z-index: 2;
}

.back {
transform: rotateY(180deg);
}
```
这段CSS代码实现了一个垂直翻转图片的效果。通过设置透视（perspective）和旋转（rotateY），在鼠标悬停时实现图片的翻转动画。.flip-container作为容器，包含了.flipper和两个面的元素.front和.back。当鼠标悬停在容器上时，.flipper元素会进行180度的Y轴旋转，从而展示另一面的图片。这样就实现了图片的垂直翻转效果。"

展开

今天学到了

赞过