码农教程 - 一技在手,衣食无忧! tools

目录

CSS scale 属性

❮上一节 完整的CSS参考 下一节❯

示例

更改元素的大小：

div {
  scale: 2;
}
亲自试一试 »

定义和用法

这个scale属性允许您更改元素的大小。

这个scale属性定义元素在 x 和 y 方向上缩放的值。您还可以定义元素在 z 方向上缩放的程度。

比例值可以以一个值、两个值或三个值的形式给出。

  • 如果给定一个值，则元素在 x 和 y 方向上缩放相同的量。
  • 如果给出两个值，则元素将分别在 x 和 y 方向上缩放。
  • 如果给出三个值，则元素将分别在 x、y 和 z 方向上缩放。

为了更好地理解scale属性，查看演示。

笔记：缩放元素的另一种技术是使用 CSStransformCSS 属性scale()功能。 CSSscale正如本网页所解释的，property 可以说是一种更简单、更直接的缩放元素的方法。

展示演示❯

默认值： 没有任何
遗传： 不
可动画： 是的。阅读可动画的尝试一下
版本： CSS3
JavaScript 语法： 对象.style.scale="2 0.7"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
scale 104 104 72 14.1 90

CSS 语法

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

属性值

Property Value Description Demo
x-axis Defines scale factor at the x-axis. Possible values:
  • number
  • %
 Demo ❯
y-axis Defines scale factor at the y-axis. Possible values:
  • number
  • %
 Demo ❯
z-axis Defines scale factor at the z-axis. Possible values:
  • number
  • %
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

什么时候scale属性设置有两个值，大小分别在 x 轴和 y 轴上设置。此处，元素在 x 轴上的大小变为两倍，在 y 轴上的大小变为一半：

div {
  scale: 2 50%;
}
亲自试一试 »

相关页面

CSS教程：CSS 2D 变换

CSS教程：CSS 3D 变换

CSS 旋转属性：CSS 旋转属性

CSS 翻译属性：CSS 翻译属性


❮上一节 完整的CSS参考 下一节❯