CSS - scale 属性_CSS 菜鸟教程

CSS scale 属性在指定元素的刻度转换时非常有用，与变换属性无关。

此属性便于接口使用，因为您无需记住在属性转换中要特定的顺序转换函数。

可能的值

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

Single 值：指定一个 <number> 或 <percentage> 值，以沿 X 轴和 Y 轴按相同的值缩放元素。等效于 scale（） 2D 函数，具有单个值。
Two 值：指定两个 <number> 或 <percentage> 值，以沿 X 轴和 Y 轴按给定值缩放元素。等效于 scale（） 2D 函数，有两个值。
Three 值：指定三个 <number> 或 <percentage> 值，以分别沿 X、Y 和 Z 轴在 3D 刻度中按给定值缩放元素。等效于 scale3d（）函数。
none：指定不应用缩放。

适用于

所有可转换的元素。

语法

scale = none | <number> | <percentage> ] {1,3}

CSS scale - 元素缩放

以下示例演示了如何使用 scale CSS 属性，以及各种传递值的方法。元素在悬停时缩放：

<html>
<head>
<style>
	 	.box {
	 	 	 display: inline-block;
	 	 	 margin: 0.7em;
	 	 	 min-width: 5.5em;
	 	 	 line-height: 6.5em;
	 	 	 text-align: center;
	 	 	 transition: 2s ease-in-out;
	 	 	 border: 2px solid black;
	 	 	 background-color: lightgreen;
	 	}

	 	#scale-one-box:hover {
	 	 	 scale: 2;
	 	}

	 	#scale-two-box:hover {
	 	 	 scale: 1.5 65%;
	 	}

	 	#scale-three-box:hover {
	 	 	 scale: 20% 40% 60%;
	 	}
</style>
</head>
<body>
	 	<h1>CSS Scale property</h1>
	 	<div class="box" id="scale-one-box">scale (x)</div>
	 	<div class="box" id="scale-two-box">scale (x,y)</div>
	 	<div class="box" id="scale-three-box">scale (x,y,z)</div>
</body>
</html>

<< CSS grid - row-gap 属性 CSS - scroll-behavior 属性 >>