CSS 属性

CSS 属性transform对于元素的旋转、缩放、倾斜或平移非常有用。当此属性的值为 none 以外的任何值时，它的作用类似于具有position:fixed 或position:absolute 作为值的元素的包含块。

CSS 属性transform 可以指定为关键字none，或作为一个或多个 <transform-function> 值。

perspective() 函数应首先列出，当它是多个函数值之一时。

属性值

CSS属性转换可以具有以下值之一:

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

1.矩阵变换

2. perspective()

3.旋转

4.缩放（调整大小）

5.倾斜（扭曲）

6.translate（移动）

适用范围

所有可变形元素。

语法

transform = none | <transform-function> +

以下部分显示了该属性可以采用以下值:

/* 关键字 */ 
transform = none;

/* 函数值 */
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);

/* 多个函数值 */
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>