EIA's 3D卡片翻转效果教程

使用纯CSS创建3D卡片翻转效果，无需JavaScript

效果示例

将鼠标悬停在下面的卡片上查看3D翻转效果

钻石会员

尊享特权服务

鼠标悬停翻转卡片

特权详情

  • 专属客户服务
  • 优先活动参与权
  • 高级功能解锁
  • 每月免费赠品
  • 专属会员活动

实现原理

3D卡片效果主要使用CSS的transform和perspective属性实现。 通过创建一个3D空间，让卡片的正反面在不同平面上，然后通过旋转实现翻转效果。

核心CSS代码

/* 创建3D透视空间 */
.card-3d {
    perspective: 1000px;
}

/* 卡片容器，启用3D变换 */
.card-inner {
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* 鼠标悬停时翻转卡片 */
.card-3d:hover .card-inner {
    transform: rotateY(180deg);
}

/* 卡片正面和背面共用样式 */
.card-front, .card-back {
    position: absolute;
    backface-visibility: hidden;
}

/* 背面默认翻转180度 */
.card-back {
    transform: rotateY(180deg);
}

实现步骤

1
HTML结构
创建卡片的基本HTML结构，包括一个外部容器、一个内部容器以及正面和背面两个元素。
2
设置3D透视
为外部容器设置perspective属性，定义3D空间的透视深度。值越小，3D效果越明显。
3
启用3D变换
为内部容器设置transform-style: preserve-3d，确保子元素在3D空间中呈现。
4
隐藏背面
为正面和背面元素设置backface-visibility: hidden，确保当元素面向用户时背面不可见。
5
初始翻转背面
将背面元素初始旋转180度，使其在开始时隐藏。
6
添加悬停效果
为外部容器添加:hover状态，当鼠标悬停时翻转内部容器180度，使背面可见。

注意事项