卡片翻转效果 | wjs-css-effects

点击翻转

查看背面内容

背面内容

这是卡片的背面，展示更多详细信息。

Y轴翻转

上下翻转

X轴方向翻转

背面内容

沿 X 轴翻转的卡片效果。

X轴翻转

弹性翻转

带回弹效果

背面内容

贝塞尔曲线实现弹性翻转。

弹性翻转

点我翻面

翻回来了

小巧提示卡

关键点

卡片翻转利用 3D 变换 rotateY 实现卡片沿 Y 轴旋转 180 度的效果
父容器设置 perspective 创建透视空间，让翻转有真实的近大远小感
正反两面卡片绝对定位叠在一起，backface-visibility: hidden 隐藏背面
翻转时正面从 0deg 转到 -180deg，背面从 180deg 转到 0deg，两者同步进行
transform-style: preserve-3d 确保子元素在 3D 空间中正确渲染

效果说明

3D 透视卡片翻转效果。利用 perspective 创建透视空间，transform: rotateY() 沿 Y 轴旋转，backface-visibility: hidden 隐藏背面。点击卡片触发翻转动画，正反面内容不同。这里展示 4 种变体：Y轴翻转、X轴翻转、弹性翻转、小巧提示卡。