CSS - transform 属性_CSS 菜鸟教程

CSS transform 属性在元素的旋转、缩放、倾斜或平移中非常有用。当此属性的值不是 none 时，它的作用类似于具有 position： fixed 或 position： absolute 作为值的元素的包含块。

CSS transform 属性可以指定为关键字值 none，也可以指定为一个或多个 <transform-function> 值。

当 perspective（）函数是多个函数值之一时，应首先列出该函数。

可能的值

CSS transform 属性可以具有以下值之一：

<transform-function>：要应用的多个转换函数之一。
none：指定不应用任何转换。

以下部分列出了所有各种 <transform-function>：

1. 矩阵变换

matrix()
matrix3d()

2. perspective()

3. 旋转

4. 缩放（调整大小）

scale()
scale3d()
scaleX()
scaleY()
scaleZ()

5.歪斜（失真）

skew()
skewX()
skewY()

6. 翻译（移动）

适用于

所有可转换的元素。

语法

transform = none | <transform-function> +

以下部分显示了此属性可以采用值的各种方式：

/* Keyword 值 */	
transform = none;

/* Functions as values */
transform = matrix(1, 2, 3, 4, 5, 6);
transform = matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform = perspective(200px);
transform = rotate(45deg);
transform = rotate3d(1, 2, 3, 35deg);
transform = rotateX(25deg);
transform = rotateY(25deg);
transform = rotateZ(25deg);
transform = translate(10px, 60%);
transform = translate3d(10px, 60%, 2em);
transform = translateX(2.5em);
transform = translateY(2in);
transform = translateZ(2in);
transform = scale(2, 0.5);
transform = scale3d(2, 1.5, 0.5);
transform = scaleX(2);
transform = scaleY(1.5);
transform = scaleZ(0.5);
transform = skew(20deg, 10deg);
transform = skewX(20deg);
transform = skewY(2rad);

/* Multiple function values */
transform = translateX(20px) rotate(20deg) translateY(10px);
transform = perspective(200px) translate(20px, 0, 20px) rotateY(5deg);

可访问性问题：对于辅助功能，缩放和缩放动画存在问题，并且可能导致特定类型的偏头痛。如果您需要在页面上添加此类动画，请给用户一些灵活性来关闭动画。

您可以使用 prefers-reduced-motion 媒体功能编写一个媒体查询，当用户在其所选系统中具有缩小的动画时，该查询可能会关闭动画。

CSS transform - 旋转元素

以下是 rotate（）函数的示例，其中包含各种值作为参数，包括正值和负值：

<html>
<head>
<style>
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: lightblue;
	 	 	 margin-bottom: 1em;
	 	}

	 	.rotate-all-positive {
	 	 	 background-color: lightgreen;
	 	 	 transform: rotate(45deg);
	 	}

	 	.rotate-3d {
	 	 	 background-color: tomato;
	 	 	 transform: rotate3d(-2, -1, -1, 45deg);
	 	}

	 	.rotate-x {
	 	 	 background-color: cyan;
	 	 	 transform: rotateX(60deg);
	 	}

	 	.rotate-y {
	 	 	 background-color: lightgoldenrodyellow;
	 	 	 transform: rotateY(40deg);
	 	}

	 	.rotate-z {
	 	 	 background-color: pink;
	 	 	 transform: rotateZ(60deg);
	 	}
</style>
</head>
<body>
	 	<div>No function</div>
	 	<div class="rotate-all-positive">
	 	 	 	 rotate
	 	</div>
	 	<div class="rotate-3d">
	 	 	 rotate3d
	 	</div>
	 	<div class="rotate-x">
	 	 	 rotateX
	 	</div>
	 	<div class="rotate-y">
	 	 	 rotateY 	 	 	
	 	</div>
	 	<div class="rotate-z">
	 	 	 rotateZ
	 	</div>
</body>
</html>

CSS transform - 缩放元素

以下是 scale（）函数的示例，展示了如何将各种值传递给函数：

<html>
<head>
<style>
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: lightblue;
	 	 	 margin-bottom: 1em;
	 	}

	 	.scale {
	 	 	 background-color: lightgreen;
	 	 	 transform: scale(0.7, 0.4);
	 	}

	 	.scale-3d {
	 	 	 background-color: tomato;
	 	 	 transform: scale3d(1, 1.5, 0.5);
	 	}

	 	.scale-x {
	 	 	 background-color: cyan;
	 	 	 transform: scaleX(1.2);
	 	}

	 	.scale-y {
	 	 	 background-color: lightgoldenrodyellow;
	 	 	 transform: scaleY(0.5);
	 	}

	 	.scale-z {
	 	 	 background-color: pink;
	 	 	 transform: perspective(300px) scaleZ(0.5);
	 	}
</style>
</head>
<body>
	 	<div>No function</div>
	 	<div class="scale">
	 	 	 	 scale
	 	</div>
	 	<div class="scale-3d">
	 	 	 scale3d
	 	</div>
	 	<div class="scale-x">
	 	 	 scaleX
	 	</div>
	 	<div class="scale-y">
	 	 	 scaleY 	 	 	
	 	</div>
	 	<div class="scale-z">
	 	 	 scaleZ
	 	</div>
</body>
</html>

CSS transform - 翻译元素

以下是 translate（）函数的示例，其中包含可以将值传递给它的各种方式：

<html>
<head>
<style>
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: lightblue;
	 	 	 margin-bottom: 1em;
	 	}

	 	.translate {
	 	 	 background-color: lightgreen;
	 	 	 transform: translate(10px, 50%);
	 	}

	 	.translate-3d {
	 	 	 background-color: tomato;
	 	 	 transform: perspective(500px) translate3d(10px, 40%, 1.5em);
	 	}

	 	.translate-x {
	 	 	 background-color: cyan;
	 	 	 transform: translateX(50px);
	 	}

	 	.translate-y {
	 	 	 background-color: lightgoldenrodyellow;
	 	 	 transform: translateY(30%);
	 	}

	 	.translate-z {
	 	 	 background-color: pink;
	 	 	 transform: perspective(500px) translateZ(1in);
	 	}
</style>
</head>
<body>
	 	<div>No function</div>
	 	<div class="translate">
	 	 	 	 translate
	 	</div>
	 	<div class="translate-3d">
	 	 	 translate3d
	 	</div>
	 	<div class="translate-x">
	 	 	 translateX
	 	</div>
	 	<div class="translate-y">
	 	 	 translateY 	 	 	
	 	</div>
	 	<div class="translate-z">
	 	 	 translateZ
	 	</div>
</body>
</html>

<< CSS - top 属性 CSS - transform-box 属性 >>