2D与3D转换
大约 2 分钟约 524 字...
css 3d 空间坐标轴

2d 变形
旋转变形
- 将
transform
属性的值设置为rotate()
,即可实现旋转变形 rotate()
本质上是将图形围绕 z 轴进行旋转- 那么
rotateX()
、rotateY()
就很好理解了 - 若角度为正,则顺时针方向旋转,否则逆时针方向旋转
transform: rotate(45deg);
transform-origin 属性
可以使用 transform-origin
属性设置自己的自定义变换原点,默认是以中心点作为变换原点
缩放变形
- 将
transform
属性的值设置为scale()
,即可实现缩放变形 - 参数:第一个参数代表x轴放大缩小倍数,第二个参数代表y轴,如果省略第二个参数默认和第一个参数数值相同
斜切变形
将 transform 属性的值设置为 skew(),即可实现斜切变形
transform: skew(10deg, 20deg) <!---- 第一个值是x斜切角度。第二个值为y斜切角度>;
位移变形
将 transform
属性的值设置为 translate()
,即可实现位移变形(以自己为参考点)
现在可以直接使用translate:
属性进行设置
<!-- translate(-50%,-50%) 作用是往左(x轴)往上(y轴)移动自身长宽的 50%,以使其居于中心位置 -->
transform:translate(-50%,-50%)
transform:translate(100px,200px)
translate: -50% -50%
3d 旋转
将 transform 属性的值设置为 rotateX()或者 rotateY(),即可实现绕横轴、纵轴旋转
注:rotateZ 和 rotate 效果一样
perspective 属性
perspective 属性用来定义透视强度,可以理解为“人眼到舞台的距离”,单位是 px
<div class="box">
=> 舞台 必须设置perspective属性
<p></p>
=> 设置transform属性
</div>
空间移动
当元素进行 3D 旋转后,即可继续添加 translateX()、 translateY()、 translateZ()属性让元素在空间进行移动
以当前的旋转面形成坐标轴
制作一个正方体
// TODO
See the Pen by zhangfanhang on CodePen.