作用: 为元素添加动态效果, 一般与过渡配合使用.

概念: 改变盒子在平面内的形态(位移, 旋转, 缩放, 倾斜).

平面转换又叫2D转换

属性名: transform.

例子:

HTML

<img src="assets/304ba504f27b147a71e00dd072a6be3dbb43138e.gif" alt="img">

CSS

img{
    width: 300px;
    height: 300px;
    transition: all 0.5s;
}

img:hover{
    transform: translate(200px) rotate(360deg) scale(2);
}

平移

transform: translate(X轴移动距离, Y轴移动距离);

如果想单独设置XY轴, 可以使用以下属性值.

transform: translateX(X轴移动距离);

transform: translateY(Y轴移动距离);

例子:

HTML

<img src="assets/304ba504f27b147a71e00dd072a6be3dbb43138e.gif" alt="img">

CSS

img{
	width: 300px;
	height: 300px;
	transition: all 0.5s;
}

img:hover{
	transform: translate(200px, 200px);
}

旋转

transform: rotate(旋转角度);

如果想单独设置XY轴, 可以使用以下属性值.

transform: rotateX(旋转角度);

transform: rotateY(旋转角度);

单位: deg.

正数顺时针, 负数逆时针.

例子:

HTML

<img src="assets/304ba504f27b147a71e00dd072a6be3dbb43138e.gif" alt="img">

CSS

img{
	width: 300px;
	height: 300px;
	transition: all 0.5s;
}

img:hover{
	transform: rotate(360deg);
}

改变转换原点

默认情况下, 转换原点是盒子中心点.

transform-origin: 水平原点位置 垂直原点位置;

属性值:

• 方位名: left, top, right, bottom, center.
• 数值.
• 百分比.

例子:

HTML

<img src="assets/304ba504f27b147a71e00dd072a6be3dbb43138e.gif" alt="img">

CSS

img{
	width: 300px;
	height: 300px;
	transition: all 0.5s;
}

img:hover{
	transform-origin: right bottom;
	transform: rotate(180deg);
}

多重转换

transform: 动态效果1 动态效果2;

每个动态效果用空格分割.

例如先平移在旋转:

transform: translate() rotate();

缩放

transform: scale(缩放倍率);

transform: scale(X轴缩放倍率, Y轴缩放倍率);

通常, 只为scale设置一个值, 表示X轴和Y轴等比例缩放.

取值大于1为放大, 小于1为缩小.

例子:

HTML

<img src="assets/304ba504f27b147a71e00dd072a6be3dbb43138e.gif" alt="img">

CSS

img{
	width: 300px;
	height: 300px;
	transition: all 0.5s;
}

img:hover{
	transform: scale(2, 0.8);
}

倾斜

transform: skew(倾斜角度);

单位: deg.

例子:

HTML

<img src="assets/304ba504f27b147a71e00dd072a6be3dbb43138e.gif" alt="img">

CSS

img{
	width: 300px;
	height: 300px;
	transition: all 0.5s;
}

img:hover{
	transform: skew(30deg);
}

空间转换

空间:是从坐标轴角度定义的X, Y, Z三条坐标轴构成了一个立体空间, Z轴位置与视线方向相同.

空间转换也叫3D转换.

3D平移

transform: translate3d(X轴移动距离, Y轴移动距离, Z轴移动距离);

如果想单独设置XYZ轴, 可以使用以下属性值.

transform: translateX(X轴移动距离);

transform: translateY(Y轴移动距离);

transform: translateZ(Z轴移动距离);

例子:

HTML

<img src="assets/304ba504f27b147a71e00dd072a6be3dbb43138e.gif" alt="img">

CSS

img{
	width: 300px;
	height: 300px;
	transition: all 0.5s;
}

img:hover{
	transform: translate3d(200px, 200px, 500px);
}

由于电脑是平面的, 默认状态下无法观察到Z轴的平移效果.

视距

作用: 指定了观察者与Z=0平面的距离, 为元素添加透视效果.

透视效果: 近大远小, 近实远虚.

属性(添加给父级, 建议取值范围800~1200).

perspective: 视距;

例子:

HTML

<div>
	<img src="assets/304ba504f27b147a71e00dd072a6be3dbb43138e.gif" alt="img">
</div>

CSS

div{
	perspective: 1000px;
}

img{
	width: 300px;
	height: 300px;
	transition: all 0.5s;
}

img:hover{
	transform: translateZ(-200px);
}

3D旋转

transform: rotate3d(X, Y, Z, 旋转角度);

transform: rotateZ(旋转角度);

X, Y, Z取值为0~1之间的数.

单位: deg.

正数顺时针, 负数逆时针.

例子:

HTML

<img src="assets/304ba504f27b147a71e00dd072a6be3dbb43138e.gif" alt="img">

CSS

img{
	width: 300px;
	height: 300px;
	transition: all 0.5s;
}

img:hover{
	transform: rotateZ(360deg);
}

立体呈现

作用: 设置元素的子元素是位于3D空间中还是平面中.

transform-style

属性值:

flat: 子级处于平面中.

preserve-3d: 子级处于3D空间.

3D缩放

transform: scale3d(X轴缩放倍率, Y轴缩放倍率, Z轴缩放倍率);

取值大于1为放大, 小于1为缩小.

版权所有

版权归属：洱海

许可证：署名 4.0 国际 (CC-BY-4.0)

编辑此页

贡献者: 洱海

上一页Favicon 图标

下一页渐变