跳至主要內容

2D与3D转换

zfh前端基石CSS3大约 2 分钟约 524 字

css 3d 空间坐标轴

css3d空间坐标轴
css3d空间坐标轴

2d 变形

旋转变形

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

transform-origin 属性

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

transform-origin(MDN)open in new window

缩放变形

  • 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.
上次编辑于:
本站勉强运行 小时