transform三大属性之rotate（旋转）

Dear 丶 2021-09-02 10:34 2363阅读 0赞

## transform三大属性之rotate ##

**其他：[transform三大属性rotate、scale、translate][transform_rotate_scale_translate]**  
**[菜鸟实例][Link 1]**  
rotate(angle)定义2D旋转 ——原点为基点  
rotateX(angle)X ——X轴为基点  
rotateY(angle)Y ——Y轴为基点  
transform: rotate3d(x,y,z,angle)定义3d旋转 ——（x,y,z）为基点 +旋转角度  
![在这里插入图片描述][20201028165303228.gif_pic_center]  
**CSS**

/* rotate(45deg) */
        .rotate:hover .fill { 
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
        }
    
        /* rotateX(45deg) */
        .rotateX:hover .fill { 
          -webkit-transform: rotateX(45deg);
          transform: rotateX(45deg);
        }
    
        /* rotateY(45deg) */
        .rotateY:hover .fill { 
          -webkit-transform: rotateY(45deg);
          transform: rotateY(45deg);
        }
    
        /* rotateZ(45deg) */
        .rotateZ:hover .fill { 
          -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
        }

**完整代码**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>transform</title>
    
      <style> body { background: #F5F3F4; margin: 0; padding: 10px; font-family: 'Open Sans', sans-serif; text-align: center; } .card { display: inline-block; margin: 10px; background: #fff; padding: 15px; min-width: 200px; box-shadow: 0 3px 5px #ddd; color: #555; } /* 背景 */ .card .box { width: 100px; height: 100px; margin: auto; background-color: #ddd; cursor: pointer; box-shadow: 0 0 5px #ccc; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; } .card .box .fill { width: 100px; height: 100px; position: relative; transform-origin: center; -webkit-transition: 0.3s; transition: 0.3s; background-color: skyblue; } /* rotate(45deg) */ .rotate:hover .fill { -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* rotateX(45deg) */ .rotateX:hover .fill { -webkit-transform: rotateX(45deg); transform: rotateX(45deg); } /* rotateY(45deg) */ .rotateY:hover .fill { -webkit-transform: rotateY(45deg); transform: rotateY(45deg); } /* rotateZ(45deg) */ .rotateZ:hover .fill { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } /* transform: rotate3d(x,y,z,angle);*/ /* 角度为整数表示顺时针，角度为负表示逆时针 */ .rotate3d:hover .fill { -webkit-transform: rotate3d(1, 0, 1, -180deg); transform: rotate3d(1, 0, 1, -180deg); } </style>
    </head>
    
    <body>
      
      
      <div class="card">
        <div class="box rotate">
          <div class="fill"></div>
        </div>
        <p>rotate(45deg)</p>
      </div>
    
      
      <div class="card">
        <div class="box rotateX">
          <div class="fill"></div>
        </div>
        <p>rotateX(45deg)</p>
      </div>
      
      <div class="card">
        <div class="box rotateY">
          <div class="fill"></div>
        </div>
        <p>rotateY(45deg)</p>
      </div>
      
      <div class="card">
        <div class="box rotateZ">
          <div class="fill"></div>
        </div>
        <p>rotateZ(45deg)</p>
      </div>
    </body>
    
    </html>

![rotate(45deg)][rotate_45deg]  
![rotateX(45deg)][rotateX_45deg]  
![rotateY(45deg)][rotateY_45deg]  
transform: rotate3d(1, 0, 1, -180deg);顺时针旋转消失  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center]

[transform_rotate_scale_translate]: https://blog.csdn.net/weixin_44167504/article/details/108416216
[Link 1]: https://c.runoob.com/codedemo/3391
[20201028165303228.gif_pic_center]: /images/20210725/6ab409089d0f4434a00cfbf9fd84b4f9.png
[rotate_45deg]: /images/20210725/ec22ab26114043a197be648a97bd030d.png
[rotateX_45deg]: /images/20210725/9ef729161daf409ab704637ed8c87a31.png
[rotateY_45deg]: /images/20210725/b7dd0d7af1784b17a1e7a5752672023e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/80f015cc7e05494fb6c8f871d631a561.png