2D与3D转换

css 3d 空间坐标轴

css3d空间坐标轴

2d 变形

旋转变形

• 将 transform 属性的值设置为 rotate()，即可实现旋转变形
• rotate()本质上是将图形围绕 z 轴进行旋转
• 那么rotateX()、rotateY()就很好理解了
• 若角度为正，则顺时针方向旋转，否则逆时针方向旋转

transform: rotate(45deg);

transform-origin 属性

可以使用 transform-origin 属性设置自己的自定义变换原点，默认是以中心点作为变换原点

transform-origin(MDN)

缩放变形

• 将 transform 属性的值设置为 scale()，即可实现缩放变形
• 当数值小于 1 时，表示缩小元素；大于 1 表示放大元素

斜切变形

将 transform 属性的值设置为 skew()，即可实现斜切变形

transform: skew(10deg, 20deg) <!---- 第一个值是x斜切角度。第二个值为y斜切角度>;

位移变形

// TODO 看下 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

将 transform 属性的值设置为 translate()，即可实现位移变形（以自己为参考点）

<!--  translate(-50%,-50%) 作用是，往上（y轴）,左（x轴）移动自身长宽的 50%，以使其居于中心位置。 -->
transform:translate(-50%,-50%)
transform:translate(100px,200px)

3d 旋转

将 transform 属性的值设置为 rotateX（）或者 rotateY（），即可实现绕横轴、纵轴旋转

注：rotateZ 和 rotate 效果一样

perspective 属性

perspective 属性用来定义透视强度，可以理解为“人眼到舞台的距离”，单位是 px

<div class="box">
  => 舞台 必须设置perspective属性
  <p></p>
  => 设置transform属性
</div>

空间移动

• 当元素进行 3D 旋转后，即可继续添加 translateX()、 translateY()、 translateZ()属性让元素在空间进行移动

• 以当前的旋转面形成坐标轴

制作一个正方体

See the Pen by zhangfanhang on CodePen.