导读

• 相关单词
• 坐标轴
• transform属性(translate() scale() rotate() skew())
• perspective
• perspective-origin

相关单词

• transform 变换、转换、变形
• origin：起源、源头
• perspective： 透视
• translate： 移动（本意是翻译）
• scale: 缩放
• rotate： 旋转
• skew: 倾斜、斜切

坐标轴

3d_axes.jpg

• x轴：水平轴。
• y轴：垂直轴。
• z轴：垂直于屏幕的轴。

transform属性

定义：transform属性定义元素的变换。允许您对元素进行移动、旋转、缩放和倾斜变换。

translate()

定义：translate()函数用于对元素进行移动变换。

语法

div{
  transform: translate(12px, 50%);
  transform: translate3d(12px, 50%, 3em);
  transform: translateX(2em);
  transform: translateY(3in);
  transform: translateZ(2px);
}

属性值：

1. 可使用任何长度值：px % em rem vh vw
2. 属性值数量由函数决定：1 - 3 个

用法：

• 当子元素translateZ(100px)看不到时：可通过为父元素添加transform: rotate3d(1,1,1,45deg)查看子元素的移动效果，也可通过perspective属性添加景深查看子元素移动效果。

scale()

定义：scale()函数用于对元素进行缩放变换。

语法

div{
  transform: scale(2, 0.5);
  transform: scale3d(2.5, 1.2, 0.3);
  transform: scaleX(2);
  transform: scaleY(0.5);
  transform: scaleZ(0.3);
}

属性值：

1. 数值在[-1, 1]内表示收缩,-0.5等同于0.5，否则表示放大。
2. 属性值数量由函数决定：1 - 3 个

rotate()

定义：rotate()函数用于对元素进行旋转变换。

语法

div{
  transform: rotate(0.5turn); /* 效果等同于 rotateZ(45deg) */
  transform: rotateX(10deg);
  transform: rotateY(10deg);
  transform: rotateZ(10deg);
  transform: rotate3d(x, y, z, 10deg); 
}

属性值：

• deg: 表示旋转角度。正值表示顺时针旋转，负值表示逆时针旋转。
• turn: 表示旋转圈数。0.5表示1/4圈，1表示半圈，2表示1圈。
• rotate3d() 创建的旋转量由x,y,z三个数值和一个角度指定。

用法：

• rotate() ：当子元素rotate(90deg)看不到时：可旋转父元素以查看子元素的旋转效果。
• rotate()效果等同于rotateZ()

skew()

定义：skew()函数用于对元素进行斜切变换。

语法

div{
  transform: skew(30deg, 20deg);
transform: skew(10deg); /* 效果等同于skewX(10deg) */
  transform: skewX(30deg);
  transform: skewY(1.07rad);
}

属性值

• deg：表示斜切的角度
• 默认值：0
• rad：表示半径

transform-style

定义：

transform-origin

定义：指定原点的位置。默认情况下，它位于元素的中心并且可以移动。它被需要特定点作为参数的多种变换使用，例如旋转、缩放或倾斜。

示例：图片以bottom left为原点顺时针旋转了90度

<img
  style="rotate: 90deg;
      transform-origin: bottom left;"
  src="logo.png"
  alt="MDN Logo" />

perspective

定义：定义z轴原点到屏幕的距离。开启3D空间上下文。（Z轴是垂直屏幕的轴）
特征：大透视小变换；小透视大变换。
语法

父元素{
  perspective: none | px | em;
}

属性值：

• none: 不开启透视。默认值
• 长度值：开启透视，并设置透视距离。（最小值是1px）

perspective-origin

定义：要配置的第二个元素是观察者的位置，具有 perspective-origin 属性。默认情况下，视角以观察者为中心，这并不总是足够的。
语法

/* One-value syntax */
perspective-origin: x-position;

/* Two-value syntax */
perspective-origin: x-position y-position;

/* When both x-position and y-position are keywords,
   the following is also valid */
perspective-origin: y-position x-position;

x 位置: 表示消失点的横坐标位置。它可以具有以下值之一：

• <length-percentage> 以绝对长度值或相对于元素宽度的形式指示位置。该值可能为负。
• left，关键字是 0 长度值的快捷方式。
• center，关键字是 50% 百分比值的快捷方式。
• right，关键字是 100% 百分比值的快捷方式。

y 位置

指示消失点的纵坐标位置。它可以具有以下值之一：

• <length-percentage> 以绝对长度值或相对于元素高度的形式指示位置。该值可能为负。
• top，关键字是 0 长度值的快捷方式。
• center，关键字是 50% 百分比值的快捷方式。
• bottom，关键字是 100% 百分比值的快捷方式。

透视

透视指在平面上描绘物体的空间关系的方法。

透视的特点：

1. 近大远小
2. 近快远慢
3. 近实远虚