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>

打印页面