CSS怎样制作卡片折叠立体效果？rotate3d变换组合

爱谁谁

发布时间：2025-08-19 09:39:01

438人浏览过

来源于php中文网

原创

要实现css卡片折叠立体效果，必须结合rotate3d、transform-origin、perspective和transform-style: preserve-3d。1. 首先构建多层html结构，将卡片分为多个子元素（如左、中、右三部分），每个子元素代表一个折叠页片；2. 在css中，父容器设置perspective以创建3d透视环境，并启用transform-style: preserve-3d，确保子元素处于同一3d空间而不被扁平化；3. 每个子元素使用绝对定位，并根据其折叠方向精确设置transform-origin，如左侧页片向右折叠时轴心在右侧（transform-origin: right center），右侧页片向左折叠时轴心在左侧（transform-origin: left center）；4. 通过:hover或javascript触发transform属性，使用rotatey(angle)实现水平折叠（如rotatey(-90deg)或rotatey(90deg)），形成书页翻动的视觉效果；5. 为实现更复杂的交互（如点击展开、分步动画），采用css定义动画状态与过渡，javascript负责控制类名切换或动态计算transform值，实现灵活且高性能的多页折叠效果。该方法通过合理组合css 3d变换属性与javascript逻辑控制，最终实现自然真实的卡片折叠立体效果。

CSS怎样制作卡片折叠立体效果？rotate3d变换组合

CSS制作卡片折叠立体效果，核心在于利用

rotate3d

变换、巧妙设置

transform-origin

以及合理运用

perspective

和

transform-style: preserve-3d

。这并不是一个单一属性就能搞定的事，它需要我们把卡片分解成多个“页片”，然后让每个页片围绕各自的轴线进行旋转，最终形成折叠的视觉错觉。

解决方案

要实现这种效果，我们需要构建一个多层的HTML结构，其中包含一个父容器和若干个子元素，每个子元素代表卡片的一个“折叠页”。

HTML结构： 设想一个卡片被纵向或横向切分成几部分。例如，一个三折页卡片：
```
    
    
    
```

CSS基础设置：

立即学习“前端免费学习笔记（深入）”；

父容器的

perspective

和
transform-style: preserve-3d
：这是创建3D场景的基石。

perspective

定义了观察者与3D场景的距离，决定了透视效果的强度；

preserve-3d

则确保子元素在父元素的3D空间中保持其3D变换，而不是被扁平化。

.card-container {
    width: 300px;
    height: 200px;
    position: relative;
    /* 关键：设置透视距离 */
    perspective: 1000px;
    /* 关键：让子元素保持3D空间 */
    transform-style: preserve-3d;
    /* 居中显示，方便观察 */
    margin: 50px auto;
    border: 1px solid #eee;
}

子元素的定位与

transform-origin

：每个

card-panel

需要绝对定位，并占据卡片的一部分。最关键的是

transform-origin

，它决定了元素旋转的轴心。对于折叠效果，轴心通常是元素的某一边。

.card-panel {
    width: 100px; /* 1/3宽度 */
    height: 100%;
    position: absolute;
    background-color: #f0f8ff;
    border: 1px solid #ccc;
    box-sizing: border-box;
    transition: transform 0.8s ease-in-out; /* 添加过渡效果 */
    transform-origin: center center; /* 初始默认 */
}

.panel-left {
    left: 0;
    /* 左侧面板，向右折叠，轴心在右侧 */
    transform-origin: right center; /* 0% 50% */
}

.panel-center {
    left: 100px; /* 紧接左侧面板 */
    z-index: 1; /* 确保中间面板在最上层 */
}

.panel-right {
    left: 200px; /* 紧接中间面板 */
    /* 右侧面板，向左折叠，轴心在左侧 */
    transform-origin: left center; /* 100% 50% */
}

应用
```
rotate3d
```
实现折叠： 通过
```
:hover
```
或 JavaScript 触发，改变
```
card-panel
```
的
```
transform
```
属性。
```
rotate3d(x, y, z, angle)
```
允许你指定一个任意轴线进行旋转。
- 对于水平折叠（像书页一样翻动），通常使用
```
rotateY
```
  （即
```
rotate3d(0, 1, 0, angle)
```
  ）。
- 对于垂直折叠（像卷轴一样上下翻动），通常使用
```
rotateX
```
  （即
```
rotate3d(1, 0, 0, angle)
```
  ）。
```
.card-container:hover .panel-left {
    /* 向内折叠，负角度 */
    transform: rotateY(-90deg);
}

.card-container:hover .panel-right {
    /* 向内折叠，正角度 */
    transform: rotateY(90deg);
}
```
这样，当鼠标悬停在
```
.card-container
```
上时，左右两边的面板就会以各自的边缘为轴心，向内翻折90度，形成一个三折卡片的折叠效果。你可以根据需要调整角度和轴线。

为什么

perspective

和

transform-style: preserve-3d

如此重要？

说实话，我刚开始接触CSS 3D变换时，总觉得效果“不对劲”，明明设置了

rotateX

或

rotateY

，元素却只是像被压扁了一样，没有那种真实的立体感。后来才明白，这都是因为缺少了

perspective

和

transform-style: preserve-3d

。

磁力开创

快手推出的一站式AI视频生产平台

下载

perspective

就像是给你的3D场景安装了一只“眼睛”。没有它，所有的3D变换，比如旋转或Z轴上的位移，都只是在二维平面上进行投影，你看到的只是元素在平面上的缩放和变形，而不是真正的远近透视效果。它定义了视点到平面的距离，距离越小，透视感越强，物体变形也越明显；距离越大，透视感越弱，趋近于平行投影。你可以把它想象成相机镜头，没有镜头，你怎么拍出有景深的照片呢？

而

transform-style: preserve-3d

，它解决的是一个更深层次的问题，特别是当你的3D元素内部还有子元素，并且这些子元素也需要进行3D变换时。默认情况下，浏览器会把父元素上的3D变换“扁平化”到其子元素上，也就是说，子元素不会继承父元素的3D空间，而是各自独立地在自己的2D平面上进行变换。

preserve-3d

就是告诉浏览器：“等等，这个父元素和它的子元素都是在同一个3D空间里的，不要提前把它们拍扁！”它确保了子元素能够参与到父元素的3D变换中，形成一个整体的3D场景，这对于制作复杂的、多层级的3D效果至关重要。我记得有一次想做个多层翻书效果，没有

preserve-3d

，每一页都像单独的纸片在空中乱舞，完全没有“书”的感觉，加上它之后，所有页片才真正成为一个整体，在3D空间里和谐地翻动。

如何精确控制折叠的轴心？

transform-origin

的妙用

transform-origin

，这玩意儿真是CSS 3D效果的“灵魂”所在，特别是对于折叠这种需要围绕特定边缘旋转的效果。它决定了任何

transform

操作（比如旋转、缩放）的基点。默认情况下，这个基点是元素的中心点（

center center

或

50% 50%

）。但对于折叠，我们想要的不是中心旋转，而是像书页那样，围绕着书脊（也就是页面的某一侧边缘）翻动。

举个例子，如果你想让一个卡片从右侧向内折叠，那么它的旋转轴心就应该在右侧边缘。这时，你就需要设置

transform-origin: right center;

或者更精确的

transform-origin: 100% 50%;

。这意味着，当这个元素执行

rotateY

（绕Y轴旋转，即垂直轴）时，它会以自己的右边缘为轴心进行旋转。

如果卡片是从顶部向下折叠（比如一个卷轴展开），那么轴心就应该在顶部边缘，对应

transform-origin: center top;

或

50% 0%;

。此时，你会用到

rotateX

（绕X轴旋转，即水平轴）。

在制作多页折叠时，每个“页片”的

transform-origin

都需要根据其在整体结构中的位置和折叠方向来精心设置。比如，一个三折页，左侧页片向右折叠，轴心在右；右侧页片向左折叠，轴心在左。中间的页片通常不折叠，或者作为其他页片的基底。理解并灵活运用

transform-origin

，能让你精确地控制每一个折叠动作，让效果看起来既自然又真实。我个人觉得，掌握了它，就像是突然掌握了物体的重心，想让它怎么转就怎么转了，那种感觉非常棒。

制作多页折叠效果时，CSS动画与JavaScript的协同策略？

制作多页折叠效果，纯粹依赖CSS当然可以实现一些简单的交互，比如

:hover

触发。但如果想要更复杂、更动态、更具交互性的效果，比如点击按钮展开、分步折叠、或者根据用户滚动位置调整折叠状态，那么JavaScript的介入就显得至关重要了。我通常的做法是，把动画的“骨架”和“肉”交给CSS，而JavaScript则负责“指挥”和“编排”。

CSS在其中的角色： CSS最擅长的是定义动画的“状态”和“过渡”。你可以用CSS

transition

来定义从一个

transform

状态到另一个

transform

状态的平滑过渡。例如，定义一个

.is-folded

的类，当这个类被添加到元素上时，它就应用折叠后的

transform

属性。

优点： 性能优异，因为浏览器可以对CSS动画进行硬件加速；代码相对简洁，声明式地描述动画效果。
局限： 难以处理复杂的动画序列、依赖关系，或者根据动态数据计算动画值。比如，你很难用纯CSS实现一个点击后，第一页先折叠，然后第二页再折叠的链式反应。

JavaScript在其中的角色： JavaScript则提供了对动画过程的精确控制。它能够监听用户事件（点击、滚动），动态地添加或移除CSS类，甚至直接修改元素的

style.transform

属性。

优点： 极高的灵活性和控制力，可以实现复杂的动画逻辑、序列、条件判断，以及与用户交互的深度融合。可以动态计算每个折叠页的
```
transform
```
值，比如为了避免折叠时页片之间穿插（Z-fighting）或重叠，可能需要动态调整
```
translateZ
```
。
挑战： 如果不小心，可能会引入性能问题（例如在
```
scroll
```
事件中频繁修改DOM），代码量也可能比纯CSS多。

协同策略： 我通常会采取一种混合策略：

CSS定义动画状态： 在CSS中，为卡片的各种状态（如“展开”、“折叠”、“半折叠”）定义好对应的

transform

属性和

transition

效果。例如：

/* 初始展开状态 */
.card-panel {
    transform: rotateY(0deg) translateZ(0px);
    transition: transform 0.8s ease-in-out;
}
/* 折叠状态 */
.card-container.folded .panel-left {
    transform: rotateY(-90deg) translateZ(50px); /* 适当调整Z轴避免穿插 */
}
.card-container.folded .panel-right {
    transform: rotateY(90deg) translateZ(50px);
}

JavaScript触发状态切换： 使用JavaScript来监听事件，然后通过添加或移除CSS类来触发这些状态的切换。

const cardContainer = document.querySelector('.card-container');
cardContainer.addEventListener('click', () => {
    cardContainer.classList.toggle('folded');
});

JavaScript处理复杂逻辑： 对于更复杂的序列动画，比如多页依次翻动，JavaScript可以控制每一步的延迟或完成事件。你甚至可以用JavaScript动态计算
```
transform-origin
```
或
```
translateZ
```
的值，以应对不同尺寸或数量的折叠页。比如，在多页折叠时，为了避免视觉上的穿插，可能需要给每一层折叠的页片一个微小的
```
translateZ
```
偏移，让它们在Z轴上错开，JavaScript就能精确计算这些偏移量。