
获得徽章 12
赞了这篇沸点
赞了这篇沸点
使用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轴旋转,从而展示另一面的图片。这样就实现了图片的垂直翻转效果。"
"```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轴旋转,从而展示另一面的图片。这样就实现了图片的垂直翻转效果。"
展开
1
2
赞了这篇沸点
写了一个很简单的SidePanel小应用,在Chrome浏览器中,无需离开当前页面,以iframe的方式打开自建的ChatGPT Next web, 进行提问, 使用期间,相当于减少了主体页面的宽度, 侧边页面可以随时关掉,有点像移动平台的分屏
代码就几行,感兴趣可以拿走魔改
github.com
代码就几行,感兴趣可以拿走魔改
展开
4
7
赞了这篇沸点
如何使用 ECharts-GL 实现世界级、国家级、省市级 3D 地图
1
8