css3——transform：rotate（旋转）、scale（缩放）、skew（拉伸）、translate（平移）、transform-origin

约定不等于承诺〃 2022-05-09 00:14 674阅读 0赞

**注意：transform是复合属性，拆开写会替代，先平移再旋转和先旋转再平移的结果是不同的**

**1. CSS3 转换：transform属性**可以对元素进行移动、缩放、转动、拉长或拉伸

**注意：** Internet Explorer 9 要求前缀 -ms- 版本，Internet Explorer 10, Firefox, 和 Opera支持transform 属性，Chrome 和 Safari 要求前缀 -webkit- 版本。

**2. 旋转：transform: rotate();——必须是块元素**

（1）以x、y、z轴进行旋转，默认是z轴；

（2）rotateX（）、rotateY（）、rotateZ（）

（3）（）内的值单位是：deg角度

比如：transform: rotate(45deg);

![70][]

（4）还有一种复合写法：rotate3d（x,y,z,angle）

空间直角坐标系（x,y,z）和原点确定一个轴，然后在该轴上旋转angle的角度

比如：transform: rotate3d(1,1,1,45deg);

![70 1][]

注意：

第一种方法：再执行rotateX（）后的图形，再执行rotateY（）

第二种方法：直接在确定的轴上进行角度旋转

两种方法得到的结果是不一样的

**3. 缩放：transform：scale（）**

值的绝对值>1，就是放大，比如2，就是放大2倍

值的绝对值 0<值<1，就是缩小，比如0.5，就是原来的0.5倍；

值的正负，负值表示图形翻转。

默认情况下，scale（x, y）：以x/y轴进行缩放；如果y没有值，默认y==x；

也可以分开写：scaleX()  scaleY()  scaleZ()，分开写的时候，可以对Z轴进行缩放

第二种写法：transform：scale3d（x, y, z）该写法是上面的方法的复合写法，结果和上面的一样。

比如：transform: scaleX(1.8);

![70 2][]

**4. 倾斜拉伸：skew（x，y），单位：角度deg**

如果只有一个参数，y == 0

分开写：skewX（）和skewY()

正值：将图中的线拉伸

![70 3][]

比如：transform: skewX(30deg);

![70 4][]

比如：transform: skewY(30deg);

![70 5][]

**5. transform：translate（）平移**

transform：translate（20px）：一个值的时候，表示水平方向的平移20px，垂直方向0px；两个值的时候，水平方向和垂直方向分别平移。

transform：translateX()、transform：translateY()、transform：translateZ()，注意Z轴的平移是面向屏幕的

transform：translate3d(x, y, z)：三个值分别对应三个方向

比如：transform: translate3d(50px, 30px, 20px);

![70 6][]

**6. transform-origin：改变图形的中心点**

当图形的中心点改变后，**图片的旋转会受到影响；**

中心的默认值：50% 50%，即图形x轴、y轴的50%的位置，这里的百分比是以图形原来盒子长度决定的。包括border、padding、content区

比如：

.demo1{
                width: 100px;
                height: 100px;
                padding: 20px 0px;
                border: 10px solid black;
                position:absolute;
                top: 100px;
                left: 100px;
                background: green;
                transform-origin: 0% 0%;
                transform: rotate(30deg);
            }

![70 7][]

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>关键词</td> 
   <td>百分比</td> 
  </tr> 
  <tr> 
   <td>top = top center = center top</td> 
   <td>50% 0%</td> 
  </tr> 
  <tr> 
   <td>right = right center = center right</td> 
   <td>100% 50%</td> 
  </tr> 
  <tr> 
   <td>bottom = bottom center = center bottom</td> 
   <td>50% 100%</td> 
  </tr> 
  <tr> 
   <td>left = left center = center left&nbsp;</td> 
   <td>0% 50%</td> 
  </tr> 
  <tr> 
   <td>center = center center&nbsp;</td> 
   <td>50% 50%</td> 
  </tr> 
  <tr> 
   <td>top left = left top&nbsp;</td> 
   <td>0% 0%</td> 
  </tr> 
  <tr> 
   <td>top right = right top&nbsp;</td> 
   <td>100% 0%</td> 
  </tr> 
  <tr> 
   <td>bottom right = right bottom&nbsp;</td> 
   <td>100% 100%</td> 
  </tr> 
  <tr> 
   <td>bottom left = left bottom</td> 
   <td>0% 100%</td> 
  </tr> 
 </tbody> 
</table>

7. transform-style：preserve-3d；保留3d效果

比如：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            #div1 {
                position: relative;
                height: 200px;
                width: 200px;
                margin: 100px;
                padding: 10px;
                border: 1px solid black;
            }
    
            #div2 {
                padding: 50px;
                position: absolute;
                border: 1px solid black;
                background-color: red;
                transform: rotateY(60deg);
                transform-style: preserve-3d;
                -webkit-transform: rotateY(60deg); /* Safari and Chrome */
                -webkit-transform-style: preserve-3d; /* Safari and Chrome */
            }
    
            #div3 {
                padding: 40px;
                position: absolute;
                border: 1px solid black;
                background-color: yellow;
                transform: rotateY(-60deg);
                -webkit-transform: rotateY(-60deg); /* Safari and Chrome */
            }
        </style>
    </head>
    
    <body>
        <div id="div1">
            <div id="div2">HELLO
                <div id="div3">YELLOW</div>
            </div>
        </div>
    </body>
    </html>

![70 8][]

[70]: /images/20220509/92b52aa99c994613a73cad9aa8731802.png
[70 1]: /images/20220509/49102f98c859435fb347d79ee6dc5695.png
[70 2]: /images/20220509/91b5b65e853047b1bf8b85225134d64e.png
[70 3]: /images/20220509/ad1d0c75ef9742fc9e65281118f31757.png
[70 4]: /images/20220509/166fba8d7d41426d8045376bd19d6b3f.png
[70 5]: /images/20220509/a732fc03e9cf4803a63055c16ae0fc8b.png
[70 6]: /images/20220509/1be5034886ff4fe9ab207a990177cba9.png
[70 7]: /images/20220509/6ec3297ec3e44aea98eade63190ca27f.png
[70 8]: /images/20220509/4ead9b34f55c45df99d65387377d29fd.png