scale
scale CSS 屬性允許您單獨指定縮放變換，且獨立於 transform 屬性。這更符合典型的使用者介面使用習慣，並省去了記住在 transform 值中指定變換函式的精確順序的麻煩。
試一試
scale: none;
scale: 1.5;
scale: 1.7 50%;
scale: 1 -1;
scale: 1.2 1.2 2;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</section>
#default-example {
background: linear-gradient(skyblue, khaki);
perspective: 800px;
perspective-origin: 150% 150%;
}
#example-element {
width: 100px;
height: 100px;
perspective: 550px;
transform-style: preserve-3d;
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: white;
}
.front {
background: rgb(90 90 90 / 0.7);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 0.7);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(210 0 210 / 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
語法
css
/* Keyword values */
scale: none;
/* Single values */
/* values of more than 1 or 100% make the element grow */
scale: 2;
/* values of less than 1 or 100% make the element shrink */
scale: 50%;
/* Two values */
scale: 2 0.5;
/* Three values */
scale: 200% 50% 200%;
/* Global values */
scale: inherit;
scale: initial;
scale: revert;
scale: revert-layer;
scale: unset;
值
- 單個值
-
一個
<number>或<percentage>，指定一個縮放因子，使受影響的元素沿 X 軸和 Y 軸以相同的因子進行縮放。等同於指定了一個單值的scale()（2D 縮放）函式。 - 兩個值
-
兩個
<number>或<percentage>值，分別指定 2D 縮放的 X 軸和 Y 軸縮放值。等同於指定了兩個值的scale()（2D 縮放）函式。 - 三個值
-
三個
<number>或<percentage>值，分別指定 3D 縮放的 X 軸、Y 軸和 Z 軸縮放值。等同於scale3d()（3D 縮放）函式。 none-
指定不應用任何縮放。
正式定義
正式語法
scale =
none |
[ <number> | <percentage> ]{1,3}
示例
懸停時縮放元素
以下示例展示瞭如何在懸停時縮放元素。顯示了兩個盒子，一個使用單個 scale 值，沿兩個軸縮放元素。第二個盒子有兩個 scale 值，分別沿 X 軸和 Y 軸獨立縮放元素。
HTML
html
<div class="box" id="box1">single value</div>
<div class="box" id="box2">two values</div>
CSS
css
.box {
float: left;
margin: 1em;
width: 7em;
line-height: 7em;
text-align: center;
transition: 0.5s ease-in-out;
border: 3px dotted;
}
#box1:hover {
scale: 1.25;
}
#box2:hover {
scale: 1.25 0.75;
}
結果
規範
| 規範 |
|---|
| CSS 變換模組級別 2 # individual-transforms |
瀏覽器相容性
載入中…
另見
注意：skew 不是一個獨立的 transform 值