1. transform 属性

在 CSS 中，利用 transform 这个属性实现对元素进行 移动、旋转、缩放和倾斜；
transform 属性的值可以是 none 或一个或多个 css 变换函数；
transform 的值不是 none 时，元素会创建自己的层叠上下文。

1.1. transform 的 2D 变换函数

属性值 描述 实例
translate(x,y) x，y 为长度单位,可以是 px，也可以是百分比%， x 表示元素在 x 轴上的 移动量 y 表示元素在 y 轴上的移动量，如果 y 值不写，则默认为 0，例如 translate(10px)表示 translate(10px,0) transform:translate(100px,200px)
translateX(x) x 为长度单位，可以是 px，也可以是百分比% 表示元素在平面 x 轴上的位移量 transform:translateX(300px)
translateY(y) y 为长度单位，可以是 px，也可以是百分比% 表示元素在平面 Y 轴上的位移量 transform:translateY(200px)
rotate(ax) ax 代表旋转的角度 正角表示顺时针旋转 负角表示逆时针旋转 transform:rotate(30deg)
rotateX(X) X 代表X轴旋转的角度 正角表示顺时针旋转 负角表示逆时针旋转 transform:rotateX(30deg)
rotateY(Y) Y 代表Y轴旋转的角度 正角表示顺时针旋转 负角表示逆时针旋转 transform:rotateY(30deg)
scaleX(x) x 数字类型，表示元素在 x（number类型，放大/缩小的倍数） 轴上的缩放比 transform:scaleX(2)
scaleY(y) y 数字类型，表示元素在 y（number类型，放大/缩小的倍数） 轴上的缩放比 transform:scaleY(2)
scale(x,y) x 数字类型，表示元素在 x 轴上的缩放比 y 数字类型，表示元素在 y 轴上的缩放比 当只有 x，没有 y 时，则 y 默认为 x，元素在 x，y 轴上均匀缩放 transform:scale(2,3)
skew(ax,ay) ax 表示一个角度，表示沿着 x 横坐标扭曲元素的角度 ay 表示一个角度，表示沿着 y 纵坐标扭曲元素的角度 transform:skew(30deg,30deg)
skewX(ax) ax 表示一个角度，表示沿着 x 横坐标扭曲元素的角度,形成水平拉伸效果 transform:skewX(30deg)
skewY(ay) ay 表示一个角度，表示沿着 y 纵坐标扭曲元素的角度，形成垂直拉伸效果 transform:skewY(30deg)

1.2. transform 的 3D 转换属性值

属性值 描述 实例
translateZ(z) z 为 px 长度单位 元素在 3D 空间 z 轴方向上的位移量 transform:translateZ(200px)
translate3d(x,y,z) x，y，z 分别为 px 长度单位， x 表示元素在 x 轴坐标上的位移量， y 表示元素在 y 轴坐标上的位移量，z 表示元素在 z 轴坐标上的位移量，该值不能使用百分比，如果使用会被认为是无效属性 transform:translate3d(50px,30px ,50px)
rotateX(ax) 表示元素绕X轴旋转一定的角度 ax 表示度数，可以为正，也可以为负 transform:rotateX(30deg);
rotateY(ay) 表示元素绕Y轴旋转一定的角度 ay 表示度数，可以为正，也可以为负 transform:rotateY(30deg)
rotateZ(az) 表示元素绕Z轴旋转一定的角度 ax 表示度数，可以为正，也可以为负 transform:rotate(30deg);
rotate3d(x, y, z, deg) 表示元素沿着自定义的轴 旋转 deg 角度， 可以为正，也可以为负，x/y/均为number类型，可以是0到1之间的值 transform:rotate(30deg);
scalez() 设置对象在Z轴的大小缩放，表达式中的表示缩放尺寸 transform:scalez(1.2)
scale3d(sx,sy,sz) sx：对象在X 轴缩放(不能省略 )。 sy:对象在 Y 轴缩放(不能省略 )。 sz:对象在 Z 轴缩放(不能省略 ) transform:scale3d(.5,.5,.8)

2. 2D 转换

注意：
元素的左上角坐标为 （0，0）；
（0，0）坐标的右方，为 x 轴的正方向；
（0，0）坐标的下方，为 y 轴的正方向。

2.1. translate 位移

css 中通过给transform添加translate(x,y)或translateX(x)或translateY(y)来实现元素的水平或垂直位移。

属性值 描述 举例
translate(x,y) 实现元素水平和垂直位移量 translate(30px,50px)
translateX(x) 实现元素水平位移量 translateX(30px)
translateY(y) 实现元素垂直位移量 translateY(50px)

2.1.1、translate(x,y)

x 和 y 是长度值 length，可以是 px，也可以是%百分比；
x 表示元素在 x 轴上的位移量，为正表示向右移动，为负表示向左移动；
y 表示元素在 y 轴上的位移量，为正表示向下移动，为负表示向上移动；
位移和相对定位非常像，位移变形也会 “老家留坑”，即会占据原来的位置；
同时不会对其它元素造成影响，相当于悬浮在其它元素上面。

1
2
3
4
5
6
7
8
9
10
11
12
13
/* x,y 为px长度单位 */
transform: translate(50px, 50px); /* 元素水平向右移动50px，向下移动50px */
/* x,y 为%百分比 */
/* 在标准盒子模型下：
	水平位移 =（width + 左右 padding + 左右 border) * x%
	垂直位移 =（height + 上下 padding + 上下 border) * y%
*/
transform: translate(50%, 50%);
/* y 值不写，默认为0：
	transform:translate(10px) 等同于 transform:translate(10px,0)
	只有x发生位移，y轴上不发生移动
*/
transform: translate(10px);

2.1.2 translateX(x) 和 translateY(y)

1
2
3
4
5
6
7
8
9
/*
	transform:translate(x) 等同于translateX(x)
	transform 后面如果跟多个变换函数，则各函数之间用空格隔开
	本质上 translate(x,y) 是 translateX 与 translateY 两者的复合写法
*/
transform: translate(x);
transform: translateX(x); /* 实现元素在 X 轴的位移量 */
transform: translateY(y); /* 实现元素在 Y 轴的位移量 */
transform: translateX(x) translateY(y);

2.2 实现元素水平垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
/* 
	先利用绝对定位
	让元素的顶部和左侧分别与父元素垂直和水平中间对齐
	然后再利用translate，让元素向上和向左移动自身宽度的一半
	这样就实现了水平和垂直居中
*/
position: absolute;
top: 50%;
left: 50%;
/* 向左和向上分别移动元素自身宽和高的一半 */
transform: translate(-50%, -50%);

2.3 scale 缩放

css 中通过给transform添加scale(x,y)或scaleX(x)或scaleY(y)来实现元素的宽高缩放效果

2.3.1 scale(x,y)

x，y 都是数字类型，也可以用百分比%表示，分别表示元素的宽和高缩放比；
当 x，y 的值 >1 时，表示放大；<1 时，表示缩小； =1 表示不变；
当只有 x，没有 y 时，则 y 默认为 x，元素宽高同时均匀缩放。

1
2
3
4
5
6
7
8
9
10
11
12
/* 宽放大2倍，高放大3倍 */
transform: scale(2, 3);
/* 宽缩小0.5倍，高放大2倍 */
transform: scale(0.5, 2);
/* 宽高同时放大2倍 */
transform: scale(2);
/* 在标准盒子模型下：
	相对于元素的可视宽和可视高而言
	宽缩放后大小 =（width + 左右 padding + 左右 border)  * x%;
	高缩放后大小 =（height + 上下 padding + 上下 border) * y%;
*/
transform:scale(30%,50%);

2.3.2 scaleX(x) 与 scaleY(y)

1
2
3
4
5
/*
	transform:scale(x,y) 同等于 transform:scaleX(x) scaleY(y);
	本质上 scale(x,y)是 scaleX(x) 与 scaleY(y)的复合写法
*/
transform: scaleX(x) scaleY(y);

2.4 skew 斜切

css 中通过给 transform 添加 skew(ax,ay) 或 skewX(ax) 或 skewY(ay) 变换函数来实现元素斜切效果：
skewX(ax)：用于水平拉伸，使元素的每个点在水平方向上扭曲一定角度
skewY(ay)：用于垂直拉伸，使元素的每个点在垂直方向上扭曲一定角度
skew(ax,ay)：用于水平和垂直拉伸，使元素在水平和垂直方向上扭曲一定角度
ax：表示一个角度，用来表示沿着横坐标扭曲元素的角度
ay：表示一个角度，用来表示沿着纵坐标扭曲元素的角度

1
2
3
4
5
6
7
/* X轴斜切 30deg */
skewX(30deg);
/* Y轴斜切 50deg */
skewY(50deg);
/* X轴斜切 30deg Y轴斜切50deg*/
skew(30deg,50deg)
/* ax和ay可以用负值 */

2.5 rotate 旋转

css 中通过 transform:rotate(ax) 来实现元素旋转效果
ax 表示旋转的角度，比如 rotate(45deg)
ax 为正，表示顺时针方向旋转
ax 为负，表示逆时针方向旋转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.item1 {
  /* 顺时针旋转到30deg */
  transform: rotate(30deg);
}
.item2 {
  /* 逆时针旋转到30deg */
  transform: rotate(-30deg);
}
.item3 {
  /* 顺时针旋转到180deg */
  transform: rotate(180deg);
}
.item4 {
  /* 顺时针旋转30deg */
  transform: rotate(450deg);
}

2.6 transform-origin

transform-origin 属性，设置元素的变换原点，即元素在变换时是以围绕哪个点来发生变换的
默认值：transform-origin:50% 50% 0;（元素的中心）

1
2
3
4
5
6
7
8
9
10
/*
	x： 表示x轴的坐标位置
	y： 表示y轴的坐标位置
	z: 表示z轴的坐标位置 
*/
transform-orign: x y z;
/*  注意：
    x , y 的值，可以是长度值（px 或百分比%）还可以是预设的关键词
    z 的值只能是长度值 px 
*/

2.6.1 关键字表示

关键词（left、right）与（top、bottom) 与 center 三组中任意一个与另一组中的一个关键字组合来表示；
元素的默认变换原点为元素的中间位置 transform-origin:center; 。

关键字 描述
left 原点为元素左边中间位置，同left center一样
right 原点为元素右边中间位置，同right center一样
top 原点为元素上边中间位置，同top center一样
bottom 原点为元素下边中间位置，同bottom center一样
center 原点为元素中间位置，同center center一样
top left 原点为元素左上角，相当于坐标（0 0）
top right 原点为元素右上角
left bottom 原点为元素左下角
right bottom 原点为元素右下角

2.6.2 数值表示法

1
2
3
4
5
6
7
8
9
10
11
12
/* 
  x , y 为长度单位（px 或百分比%） 
  当 y 省略不写时，默认为元素的垂直中心点 
*/
transform-origin: x y;

/* 变换原点：为左上角 */
transform-origin: 0 0;
/* 变换原点为：x轴20px 与y轴30px相交的位置 */
transform-origin: 20px 50px;
/* 变换原点：为上边的中间点 */
transform-origin: 0;

2.6.3 百分比表示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.item1 {
  /* 百分比相对的是元素自身的可视宽和可视高而言，旋转的原点 */
  transform-origin: 100%;
}
.item2 {
  transform-origin: 50%;
}
.item3 {
  transform-origin: 100% 0%;
}
.item4 {
  transform-origin: 100% 100%;
}
.item5 {
  transform-origin: 100% 50%;
}

2.6.4、scale 与 skew 都可以设置其变换原点

元素默认的转换原点为元素的中心点：transform-origin:50% 50%;

2.7 2D 转换综合写法顺序问题

1
2
3
4
5
6
7
/*
同时使用多个转换，其多个转换函数之间用空格隔开；
转换函数的顺序会影响转换的效果，比如：先旋转会影响坐标轴方向；
当我们需要同时位移和旋转时，需要注意位移和旋转的书写顺序，因为先旋转会影响到元素的坐标轴方向。
*/
transform: translate() rotate() scale();

3. 3D 转换

我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。
3D特点：

  • 近大远小。
  • 物体后面遮挡不可见
    当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。

三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

  • x轴：水平向右 注意：X右边是正值，左边是负值
  • y轴：垂直向下 注意：y下面是正值，上面是负值
  • Z轴：垂直屏幕 注意：往外面是正值，往里面是负值
3D转换我们主要学习工作中最常用的3D位移和3D旋转

移动 translateZ

在Z轴上移动
translateZ(tz)相当于translate3d(0, 0, tz)
注意：translateZ必须借助perspective才能看到效果,translateZ - 一般用px单位,它不能是百分数值；那样的移动是没有意义的

3D移动 translate3d

translate3d(tx, ty, tz)语法：

  • tx是一个长度，代表移动向量的横坐标。
  • ty是一个长度，代表移动向量的纵坐标。
  • tz是一个长度，代表移动向量的 z 坐标。
    注意：x, y, z 对应的值不能省略，其中x、y、z分别指要移动的轴的方向的距离,不需要填写用 0 进行填充；

3D 旋转 rotateZ

沿着Z轴正方向旋转deg
用法：
rotateZ( angle )
参数：该函数接受代表旋转角度的单个参数角度。正角和负角分别使元素顺时针和逆时针旋转。

3D 旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着x轴，y轴，Z轴或者自定义轴进行旋转。
语法
rotate3d（x，y，z，a）-将元素围绕固定轴移动而不使其变形

  • x数字类型，可以是0到1之间的数值，表示旋转轴X坐标方向的矢量。
  • y数字类型， 可以是0到1之间的数值，表示旋转轴Y坐标方向的矢量。
  • z数字类型， 可以是0到1之间的数值，表示旋转轴Z坐标方向的矢量。
  • a角度类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。

transform: rotateX(45deg)效果

transform: rotateX(-45deg)效果

transform: rotateY(45deg)效果

transform: rotateZ()的效果和2D的rotate效果一样

transform-style(父级使用)

被嵌套元素在 3D 空间中显示。
CSS 语法
transform-style: flat|preserve-3d;
flat 子元素将不保留其 3D 位置。
preserve-3d子元素将保留其 3D 位置。
Eg: transform-style: preserve-3d;

注释：该属性必须与 transform 属性一同使用。

透视 perspective(父级使用)

CSS 语法

perspective: number|none;
透视原理： 近大远小 。
浏览器透视：把近大远小的所有图像，透视在屏幕上。
perspective：视距，表示视点距离屏幕的长短。
视点，用于模拟透视效果时人眼的位置

设置给父元素，作用于所有3D转换的子元素，translateZ是写着需要改动的元素身上的

  • d：就是视距，视 距就是一个距离人的眼睛到屏幕的距离。
  • Z：就是Z轴，物体距离屏幕的距离，轴越大（正值)我们看到的物体就越大。通过translateZ设置

最终呈现给我们的都是物体呈现在屏幕(Drawing Surface)上的样子，也就是浅蓝色的地方

提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。并非任何情况下需要透视效果，根据开发需要进行设置。

perspective-origin（父级使用）

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。
语法：
perspective-origin: x-axis y-axis;
x-axis 定义该视图在 x 轴上的位置。默认值：50%。
可能的值：left,center,right,length,%
y-axis定义该视图在 y 轴上的位置。默认值：50%。
可能的值：top,center,bottom,length,%
注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。

backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，该属性很有用。
CSS 语法
backface-visibility: visible|hidden;
visible背面是可见的。
Hidden背面是不可见的。