CSS - transform 屬性

CSS 屬性 transform 用於旋轉、縮放、傾斜或平移元素。當此屬性的值不是 none 時，它充當具有 position: fixed 或 position: absolute 值的元素的包含塊。

CSS 屬性 transform 可以指定為關鍵字值 none，或者為一個或多個 <transform-function> 值。

當使用多個函式值時，perspective() 函式應列在首位。

可能的值

CSS 屬性 transform 可以具有以下值之一

<transform-function>：應用的一個或多個變換函式。
none：指定不應用任何變換。

以下部分列出了所有各種 <transform-function>

1. 矩陣變換

matrix()
matrix3d()

2. perspective()

3. 旋轉

4. 縮放（調整大小）

scale()
scale3d()
scaleX()
scaleY()
scaleZ()

5. 傾斜（變形）

skew()
skewX()
skewY()

6. 平移（移動）

應用於

所有可變換的元素。

語法

transform = none | <transform-function> +

以下部分顯示此屬性可以採用值的各種方式

/* Keyword value */ 
transform = none;

/* Functions as values */
transform = matrix(1, 2, 3, 4, 5, 6);
transform = matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform = perspective(200px);
transform = rotate(45deg);
transform = rotate3d(1, 2, 3, 35deg);
transform = rotateX(25deg);
transform = rotateY(25deg);
transform = rotateZ(25deg);
transform = translate(10px, 60%);
transform = translate3d(10px, 60%, 2em);
transform = translateX(2.5em);
transform = translateY(2in);
transform = translateZ(2in);
transform = scale(2, 0.5);
transform = scale3d(2, 1.5, 0.5);
transform = scaleX(2);
transform = scaleY(1.5);
transform = scaleZ(0.5);
transform = skew(20deg, 10deg);
transform = skewX(20deg);
transform = skewY(2rad);

/* Multiple function values */
transform = translateX(20px) rotate(20deg) translateY(10px);
transform = perspective(200px) translate(20px, 0, 20px) rotateY(5deg);

輔助功能問題：出於輔助功能考慮，縮放動畫可能會導致某些型別的偏頭痛。如果您需要在頁面上新增此類動畫，請為使用者提供一些關閉動畫的靈活性。

您可以使用 prefers-reduced-motion 媒體功能編寫媒體查詢，當用戶在其選擇的系統中減少動畫時，該查詢可以關閉動畫。

CSS transform - 旋轉元素

以下是帶有各種值作為引數的 rotate() 函式的示例，包括正值和負值

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin-bottom: 1em;
   }

   .rotate-all-positive {
      background-color: lightgreen;
      transform: rotate(45deg);
   }

   .rotate-3d {
      background-color: tomato;
      transform: rotate3d(-2, -1, -1, 45deg);
   }

   .rotate-x {
      background-color: cyan;
      transform: rotateX(60deg);
   }

   .rotate-y {
      background-color: lightgoldenrodyellow;
      transform: rotateY(40deg);
   }

   .rotate-z {
      background-color: pink;
      transform: rotateZ(60deg);
   }
</style>
</head>
<body>
   <div>No function</div>
   <div class="rotate-all-positive">
        rotate
   </div>
   <div class="rotate-3d">
      rotate3d
   </div>
   <div class="rotate-x">
      rotateX
   </div>
   <div class="rotate-y">
      rotateY      
   </div>
   <div class="rotate-z">
      rotateZ
   </div>
</body>
</html>

CSS transform - 縮放元素

以下是 scale() 函式的示例，顯示如何將各種值傳遞給函式

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin-bottom: 1em;
   }

   .scale {
      background-color: lightgreen;
      transform: scale(0.7, 0.4);
   }

   .scale-3d {
      background-color: tomato;
      transform: scale3d(1, 1.5, 0.5);
   }

   .scale-x {
      background-color: cyan;
      transform: scaleX(1.2);
   }

   .scale-y {
      background-color: lightgoldenrodyellow;
      transform: scaleY(0.5);
   }

   .scale-z {
      background-color: pink;
      transform: perspective(300px) scaleZ(0.5);
   }
</style>
</head>
<body>
   <div>No function</div>
   <div class="scale">
        scale
   </div>
   <div class="scale-3d">
      scale3d
   </div>
   <div class="scale-x">
      scaleX
   </div>
   <div class="scale-y">
      scaleY      
   </div>
   <div class="scale-z">
      scaleZ
   </div>
</body>
</html>

CSS transform - 平移元素

以下是 translate() 函式的示例，以及將值傳遞給它的各種方式

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin-bottom: 1em;
   }

   .translate {
      background-color: lightgreen;
      transform: translate(10px, 50%);
   }

   .translate-3d {
      background-color: tomato;
      transform: perspective(500px) translate3d(10px, 40%, 1.5em);
   }

   .translate-x {
      background-color: cyan;
      transform: translateX(50px);
   }

   .translate-y {
      background-color: lightgoldenrodyellow;
      transform: translateY(30%);
   }

   .translate-z {
      background-color: pink;
      transform: perspective(500px) translateZ(1in);
   }
</style>
</head>
<body>
   <div>No function</div>
   <div class="translate">
        translate
   </div>
   <div class="translate-3d">
      translate3d
   </div>
   <div class="translate-x">
      translateX
   </div>
   <div class="translate-y">
      translateY      
   </div>
   <div class="translate-z">
      translateZ
   </div>
</body>
</html>

列印頁面