标签：translateZ 100px transform HTML background 立方体 200px CSS 3D

相信有许多的朋友在学3D转换的时候很懵，或者学完之后想做个小练习获得成就感鼓励自己，再或者想更理解透彻。做完这小练习相信大家一定会有所收获。废话不多说了，直接开始：

构建基本架构

HTML代码：

<div class="preserve">
  <div class="front">前</div>
  <div class="back">后</div>
  <div class="top">上</div>
  <div class="bottom">下</div>
  <div class="left">左</div>
  <div class="right">右</div>
</div>

相信大家玩过魔方以及在小学的时候学过立方体展开，上面代码都能理解。

添加CSS样式

.preserve>div{
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  position: absolute;
}
.preserve {
  width: 200px;
  height: 200px;
  position: relative;
  top:300px;
  left:300px;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(-25deg);
}

这里主要是使用transform-style允许子元素以3D方式显示，transform调整立方体角度方便能更清楚看懂后续操作。

.front{
  background: red;
  transform: translateZ(100px);
}

大多数玩魔方的朋友都有拆过魔方，一共有三根轴并相交一个点。我们把面对到后面的那跟轴线称为Z轴，左边到右边称为X轴，上边到下边的称为Y轴，轴相交的点称为交点。最初始状态六个面是在这个点上。
这里主要是将一个面在Z轴上，向着你眼睛的方向（离你越来越近）移动200像素。

.back{
  background: greenyellow;
  transform: translateZ(-100px);
}

.top{
  background: yellow;
  transform: rotateX(90deg) translateZ(100px);
}

这里是对立方体顶部的操作，大家可以把收放在面前，掌心对着自己，现在是就是板块的初始状态。transform的第一个值是将板块围绕着X轴旋转90°，相当于手掌的上边向后倒90°，第二个值是板块沿着Z轴运动200像素，相当于手掌向上运动一段距离。相信大家很疑惑，为什么是沿着Z轴不应该是Y轴吗。其实每个板块都是有自己的轴线，当我们对板块旋转时，自身的轴线也跟着旋转。

.bottom{
  background: violet;
  transform: rotateX(270deg) translateZ(100px);
}
.left{
  background: #4dd3;
  transform: rotateY(270deg) translateZ(100px);
}
.right{
      background: #a53952;
      transform: rotateY(90deg) translateZ(100px);
}

完毕

标签：translateZ,100px,transform,HTML,background,立方体,200px,CSS,3D
来源： https://www.cnblogs.com/lirenye/p/15793396.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。