CSS scale egenskab

定义和用法

scale 属性允许你更改元素的大小。

scale 属性定义了元素在x和y方向上的缩放比例值。你也可以定义元素在z方向上的缩放比例。

缩放值可以是一个值、两个值或三个值。

  • 如果给出一个值,元素在x和y方向上的缩放比例相同。
  • 如果给出两个值,元素分别在x和y方向上按指定的比例缩放。
  • 如果给出三个值,元素分别在x、y和z方向上按指定的比例缩放。

为了更好地理解 scale 属性,请查看演示

注意:缩放元素的另一种技术是使用带有 CSS scale() funktion 的CSStransform属性。本网页上解释的CSS scale 属性可以说是一种更简单、更直接的缩放元素的方式。

实例

例子1

更改元素的大小:

div {
  scale: 2;
}

亲自试一试

例子2

scale 属性设置为两个值时,分别在x轴和y轴上设置大小。这里,元素在x轴上的大小变为两倍,在y轴上的大小变为一半:

div {
  scale: 2 50%;
}

亲自试一试

CSS语法

scale: x-axis y-axis z-axis|initial|inherit;

属性值

描述
x-axis

定义x轴上的缩放比例。可能的值:

  • 数字
  • 百分比
y-axis

定义y轴上的缩放比例。可能的值:

  • 数字
  • 百分比
z-axis

定义z轴上的缩放比例。可能的值:

  • 数字
  • 百分比
initial 将此属性设置为其默认值。参阅 initial
inherit 从其父元素继承此属性。参阅 inherit

技术细节

默认值: none
继承性:
动画制作: 支持。请参阅:动画相关属性
版本: CSS3
JavaScript语法: object.style.scale="2 0.7"

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
104 104 72 14.1 90

相关页面

Tutorial:CSS 2D变换

Tutorial:CSS 3D transformation

Referencer:CSS rotate egenskab

Referencer:CSS translate egenskab