要实现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
变换、巧妙设置
transform-origin
以及合理运用
perspective
和
transform-style: preserve-3d
。这并不是一个单一属性就能搞定的事，它需要我们把卡片分解成多个“页片”，然后让每个页片围绕各自的轴线进行旋转，最终形成折叠的视觉错觉。
解决方案
要实现这种效果，我们需要构建一个多层的HTML结构，其中包含一个父容器和若干个子元素，每个子元素代表卡片的一个“折叠页”。
-
HTML结构： 设想一个卡片被纵向或横向切分成几部分。例如，一个三折页卡片：
<div class="card-container"> <div class="card-panel panel-left"></div> <div class="card-panel panel-center"></div> <div class="card-panel panel-right"></div> </div> -
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
。
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就能精确计算这些偏移量。
这种协同方式既能利用CSS在动画性能上的优势，又能发挥JavaScript在逻辑控制上的强大能力，实现既流畅又复杂的折叠效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
