纯CSS 3D折纸艺术：手把手教你实现会旋转的立体纸鹤

来源：站长平台作者：陈平安时间：05-13

导读：本期聚焦于小伙伴创作的《纯CSS 3D折纸艺术：手把手教你实现会旋转的立体纸鹤》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《纯CSS 3D折纸艺术：手把手教你实现会旋转的立体纸鹤》有用，将其分享出去将是对创作者最好的鼓励。

好的，我将根据您的要求，生成一篇关于如何使用纯CSS实现一只纸鹤的技术文章。文章将包含完整的HTML代码示例，并详细解释实现原理。

使用纯CSS 3D变换实现一只立体纸鹤

CSS 3D变换为前端开发提供了在浏览器中构建三维物体的能力，而无需依赖JavaScript或WebGL。纸鹤作为经典的折纸造型，其多面体结构非常适合作为CSS 3D实践的案例。本文将带领你从零开始，使用纯CSS构建一只可旋转的立体纸鹤。

技术原理概述

实现的核心技术是CSS的 transform 属性，特别是其3D变换函数：rotateX()、rotateY()、rotateZ() 以及 translateZ()。通过将多个三角形面片在三维空间中进行精确的旋转和位移，可以拼接成一个完整的立体模型。

关键的技术要点包括：

使用 perspective 属性为父容器建立3D视场，赋予场景深度感。
使用 transform-style: preserve-3d 让子元素保留其3D位置关系。
利用 clip-path: polygon() 将每个div裁剪为所需的三角形或四边形面片。
通过组合多个 transform 函数，将每个面片放置到纸鹤的对应位置。

纸鹤模型的面片分解

为了平衡视觉复杂度与代码可读性，我们将纸鹤分解为10个三角形面片。每个面片代表纸鹤的一个表面，通过CSS精确拼接。面片的构成如下：

面片编号	名称	颜色	说明
1	左前身	#e0e0e0	身体左侧前半部分
2	右前身	#e8e8e8	身体右侧前半部分
3	左后身	#d0d0d0	身体左侧后半部分
4	右后身	#d8d8d8	身体右侧后半部分
5	左翼上	#ffffff	左翅膀上表面
6	左翼下	#e0e0e0	左翅膀下表面
7	右翼上	#ffffff	右翅膀上表面
8	右翼下	#e0e0e0	右翅膀下表面
9	头部	#c0c0c0	纸鹤的头部尖端
10	尾部	#c8c8c8	纸鹤的尾部尖端

完整代码实现

以下是一个完整的HTML文件，展示了如何使用纯CSS构建并展示一只3D纸鹤。页面包含一个自动旋转的纸鹤模型，方便观察其立体结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS 3D纸鹤</title>
<style>
/* 3D场景容器 */
.scene {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

/* 纸鹤容器，所有面片都在此容器内进行3D变换 */
.origami {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  /* 初始旋转，让纸鹤以更佳角度展示 */
  transform: rotateX(-15deg) rotateY(30deg);
  /* 自动旋转动画 */
  animation: spin 12s infinite linear;
}

@keyframes spin {
  0% { transform: rotateX(-15deg) rotateY(0deg); }
  100% { transform: rotateX(-15deg) rotateY(360deg); }
}

/* 所有面片的公共样式 */
.face {
  position: absolute;
  width: 200px;
  height: 150px;
  /* 所有面片默认居中，通过clip-path裁剪为三角形 */
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -75px;
  /* 默认隐藏背面，避免视觉混乱 */
  backface-visibility: hidden;
}

/* ---------- 身体部分 (4个面片) ---------- */
/* 左前身 */
.face-body-lf {
  background: linear-gradient(145deg, #e8e8e8, #c8c8c8);
  clip-path: polygon(0% 100%, 100% 80%, 40% 0%);
  transform: rotateY(-30deg) translateZ(30px) translateX(-30px);
}

/* 右前身 */
.face-body-rf {
  background: linear-gradient(215deg, #f0f0f0, #d0d0d0);
  clip-path: polygon(0% 80%, 100% 100%, 60% 0%);
  transform: rotateY(30deg) translateZ(30px) translateX(30px);
}

/* 左后身 */
.face-body-lb {
  background: linear-gradient(35deg, #d0d0d0, #b0b0b0);
  clip-path: polygon(0% 100%, 100% 80%, 40% 0%);
  transform: rotateY(-150deg) translateZ(30px) translateX(-30px);
}

/* 右后身 */
.face-body-rb {
  background: linear-gradient(325deg, #d8d8d8, #b8b8b8);
  clip-path: polygon(0% 80%, 100% 100%, 60% 0%);
  transform: rotateY(150deg) translateZ(30px) translateX(30px);
}

/* ---------- 翅膀部分 (4个面片) ---------- */
/* 左翼上表面 */
.face-wing-lt {
  background: linear-gradient(to bottom, #ffffff, #e0e0e0);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width: 220px;
  height: 140px;
  margin-left: -110px;
  margin-top: -70px;
  /* 从身体左侧向外展开 */
  transform: rotateY(-80deg) rotateX(-10deg) translateX(-60px) translateZ(20px);
}

/* 左翼下表面 */
.face-wing-lb {
  background: linear-gradient(to top, #d0d0d0, #e8e8e8);
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  width: 220px;
  height: 140px;
  margin-left: -110px;
  margin-top: -70px;
  transform: rotateY(-80deg) rotateX(10deg) translateX(-60px) translateZ(-20px);
}

/* 右翼上表面 */
.face-wing-rt {
  background: linear-gradient(to bottom, #ffffff, #e0e0e0);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width: 220px;
  height: 140px;
  margin-left: -110px;
  margin-top: -70px;
  transform: rotateY(80deg) rotateX(-10deg) translateX(60px) translateZ(20px);
}

/* 右翼下表面 */
.face-wing-rb {
  background: linear-gradient(to top, #d0d0d0, #e8e8e8);
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  width: 220px;
  height: 140px;
  margin-left: -110px;
  margin-top: -70px;
  transform: rotateY(80deg) rotateX(10deg) translateX(60px) translateZ(-20px);
}

/* ---------- 头部和尾部 ---------- */
/* 头部 */
.face-head {
  background: linear-gradient(to right, #d0d0d0, #b0b0b0);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width: 80px;
  height: 60px;
  margin-left: -40px;
  margin-top: -30px;
  /* 向前突出，位于身体前方 */
  transform: rotateX(-40deg) translateZ(80px) translateY(-20px);
}

/* 尾部 */
.face-tail {
  background: linear-gradient(to right, #c8c8c8, #a8a8a8);
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  width: 80px;
  height: 60px;
  margin-left: -40px;
  margin-top: -30px;
  /* 向后延伸，位于身体后方 */
  transform: rotateX(40deg) translateZ(-80px) translateY(20px);
}

/* 页面辅助样式，仅用于美化显示 */
body {
  background: #1a1a2e;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* 添加光源效果的说明文字 */
.title {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #aaa;
  font-size: 14px;
  text-align: center;
  letter-spacing: 2px;
}
</style>
</head>
<body>
<div class="scene">
  <div class="origami">
    <!-- 身体 -->
    <div class="face face-body-lf"></div>
    <div class="face face-body-rf"></div>
    <div class="face face-body-lb"></div>
    <div class="face face-body-rb"></div>

    <!-- 翅膀 -->
    <div class="face face-wing-lt"></div>
    <div class="face face-wing-lb"></div>
    <div class="face face-wing-rt"></div>
    <div class="face face-wing-rb"></div>

    <!-- 头部和尾部 -->
    <div class="face face-head"></div>
    <div class="face face-tail"></div>
  </div>
</div>
<div class="title">纯CSS 3D 纸鹤 &mdash; 自动旋转展示</div>
</body>
</html>

关键实现步骤解析

上述代码的执行过程可以拆解为以下几个关键步骤，理解这些步骤有助于读者掌握CSS 3D建模的通用方法。

1. 建立3D场景与容器

外层的 .scene 容器通过 perspective: 1200px 建立了视场深度。这个值决定了3D效果的强烈程度，数值越小，透视变形越明显。内部的 .origami 容器设置了 transform-style: preserve-3d，确保其所有子元素（即各个面片）在三维空间中的位置关系得以保留，而不是被压平到同一平面。

2. 面片设计与裁剪

每个面片都是一个绝对定位的div。通过 clip-path: polygon() 属性，我们将这些方形的div裁剪成特定的三角形。例如，polygon(50% 0%, 0% 100%, 100% 100%) 会裁剪出一个顶点朝上的等腰三角形。这是构建纸鹤所有三角形面的基础。

3. 3D定位与拼合

每个面片通过 transform 属性进行3D定位。这通常需要组合使用多个变换函数：

rotateY() 让面片绕Y轴旋转，使其朝向正确的方向（例如翅膀向外展开）。
rotateX() 让面片向前或向后倾斜，以匹配纸鹤的立体轮廓。
translateX() 和 translateZ() 将面片平移到正确的位置，确保各个面片之间无缝拼接。

例如，左前身的变换 rotateY(-30deg) translateZ(30px) translateX(-30px) 表示：先将面片绕Y轴旋转-30度使其朝向左前方，然后沿Z轴（垂直于屏幕的方向）向前移动30像素，再沿X轴向左移动30像素，从而精确地贴合在纸鹤身体左侧的前方位置。

4. 色彩与光影模拟

为了让纸鹤看起来更有立体感，每个面片使用了 linear-gradient 渐变色。通过调整渐变的角度和颜色值，可以模拟出光源照射在不同表面上的明暗变化。例如，翅膀的上表面使用亮色渐变（从白色到浅灰），而下表面使用稍暗的渐变，从而营造出翅膀的厚度感。

5. 自动旋转动画

纸鹤的整体旋转通过 @keyframes spin 动画实现。动画让 .origami 容器在12秒内绕Y轴匀速旋转360度。这使得观察者可以从各个角度欣赏纸鹤的立体结构。你可以通过修改 animation-duration 的值来控制旋转速度。

调试与自定义技巧

如果你希望调整纸鹤的造型或尺寸，可以参考以下建议：

修改面片颜色：直接调整每个 .face-* 类中的 background 或 background: linear-gradient(...) 的值即可。建议使用相近的灰色系以保持折纸的质感。
调整翅膀角度：修改翅膀面片中的 rotateY() 值可以改变翅膀的展开程度。数值越接近90度，翅膀展开越宽。
缩放模型：统一修改 .face 的 width 和 height，并同步调整 margin-left 和 margin-top 为负的一半值，可以整体缩放纸鹤。同时需要调整 translateX() 和 translateZ() 的数值以匹配新的尺寸。
移除自动旋转：删除或注释掉 .origami 中的 animation 属性，然后通过修改 transform: rotateX(-15deg) rotateY(30deg) 中的角度值来手动设定一个固定的观察视角。

总结与扩展

本文通过一个具体的纸鹤案例，展示了CSS 3D变换在构建三维物体方面的能力。虽然单个面片的定位需要一定的空间想象力和调试耐心，但一旦掌握了 perspective、preserve-3d 和 transform 的组合用法，你就可以尝试构建更复杂的3D模型，例如房屋、几何晶体，甚至是低多边形风格的人物头像。

本实现的核心思路——将复杂物体分解为多个三角形面片，并通过3D变换进行拼合——与计算机图形学中的3D建模原理是相通的。CSS 3D变换虽然性能上无法与WebGL或Three.js相比，但对于构建简单的3D展示或交互原型来说，它提供了一种轻量级且无需额外库的解决方案。

CSS_3D动画 transform属性 clip_path 3D建模 preserve_3d

免责声明：已尽一切努力确保本网站所含信息的准确性。网站部分内容来源于网络或由用户自行发表，内容观点不代表本站立场。本站是个人网站免费分享，内容仅供个人学习、研究或参考使用，如内容中引用了第三方作品，其版权归原作者所有。若内容触犯了您的权益，请联系我们进行处理。