CSS卡片立体折叠效果实现教程

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《CSS卡片折叠立体效果实现方法》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

要实现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结构，其中包含一个父容器和若干个子元素，每个子元素代表卡片的一个“折叠页”。

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

2. 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% */
     }

3. 应用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多。

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

1. 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);
   }

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

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

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

这种协同方式既能利用CSS在动画性能上的优势，又能发挥JavaScript在逻辑控制上的强大能力，实现既流畅又复杂的折叠效果。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。