导读
- 相关单词
- 坐标轴
- transform属性(translate() scale() rotate() skew())
- perspective
- perspective-origin
相关单词
- transform 变换、转换、变形
- origin：起源、源头
- perspective： 透视
- translate： 移动（本意是翻译）
- scale: 缩放
- rotate： 旋转
- skew: 倾斜、斜切
坐标轴
3d_axes.jpg
- x轴：水平轴。
- y轴：垂直轴。
- z轴：垂直于屏幕的轴。
transform属性
定义：transform属性定义元素的变换。允许您对元素进行移动、旋转、缩放和倾斜变换。
| 属性 | 描述 | 属性值 |
|---|---|---|
| transform | 向元素应用变换。 | translate(),scale(),rotate(),skew() |
| transform-origin | 设置变换元素的位置。 | length,left,center,right,top,bottom |
| transform-style | 设置元素的变换风格。包括2D和3D两种风格 | flat, preserve-3d |
| perspective | 设置是否开启透视 | none, length |
| perspective-origin | 设置透视源（视角位置） | left,top,bottom,right,length |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 |
translate()
定义：translate()函数用于对元素进行移动变换。
语法
div{
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
}
属性值：
- 可使用任何长度值：px % em rem vh vw
- 属性值数量由函数决定：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]内表示收缩,-0.5等同于0.5，否则表示放大。
- 属性值数量由函数决定：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% 百分比值的快捷方式。
透视
透视指在平面上描绘物体的空间关系的方法。
透视的特点：
- 近大远小
- 近快远慢
- 近实远虚
