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>