2D与3D转换

Frank
  • 前端基石
  • CSS3
  • 2D与3D转换
大约 2 分钟约 504 字...

css 3d 空间坐标轴

css3d空间坐标轴

2d 变形

旋转变形

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

transform-origin 属性

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

transform-origin(MDN)open in new window

缩放变形

  • 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.
上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1