transform三大属性 rotate、scale、translate

女爷i 2021-09-02 07:07 1130阅读 0赞

## transform三大属性 rotate、scale、translate ##

[菜鸟教程demo][demo]  
transform三大属性：[rotate(旋转)][rotate] [scale(缩放)][scale] translate(移动)  
其他属性：skew(扭曲) matrix(矩阵变形)  
语法：transform：rotate | scale | skew | translate |matrix;

**一. 移动translate**  
translate（）相当于水平平移，+ 表示向右/下，- 表示向左/上  
translateX（x）水平方向平移  
translateY（y）垂直方向平移  
translateZ（z）相当于放大  
translate（x,y）相当于水平平移+垂直平移  
translate（x,y,z）相当于水平平移+垂直平移+放大

1.  translate（100px）实际上是水平向右平移100px

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center]

1.  **translateX（100px）水平向右平移100px**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 1]

1.  **translateY（100px）水平向下平移100px**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 2]

1.  **translateZ（100px）相当于放大**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 3]

1.  **translate（x,y）2D平移，translate（100px,100px）右、下各平移100px**

![右下角][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 4]  
6. **translate3d(20px,20px,100px) 右、下各平移20并放大**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 5]

**二. 旋转rotate**[效果图][rotate]  
rotate(angle)定义2D旋转  
rotateX(angle)  
rotateY(angle)  
rotateZ(angle)  
rotate3d(angle)定义3d旋转

<!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 6]

**三. 缩放scale**[效果图][scale]  
scale(数值)定义倍数缩放，>1放大，<1缩小  
scaleX()通过x轴定义，仅水平方向缩放  
scaleY()通过y轴定义，仅垂直方向缩放  
scaleZ()通过z轴定义，定义3d缩放

transform: scale(2);放大两倍![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 7]

transform: scaleX(2);水平方向放大两倍  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 8]

transform: scaleY(2);垂直方向放大两倍![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 9]  
缩小同理。

[demo]: https://c.runoob.com/codedemo/3391
[rotate]: https://blog.csdn.net/weixin_44167504/article/details/108416994
[scale]: https://blog.csdn.net/weixin_44167504/article/details/108416806
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/3344c8cb08b7493cb2c010c738bf3e42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/9e589064f83e4507b223f7f88bbd7e6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/797e28ee8ff04a5db74beb8b6160bb42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/7b07b16ef2f840198843f2237dbbb628.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210725/7f4f005b36dd458aab6c5d6c742ed661.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20210725/ce7b595e9fad473abc332748a4c6f6f3.png
[rotate_45deg]: /images/20210725/a72ec929b96b4e4daada2ac65ee7f1df.png
[rotateX_45deg]: /images/20210725/1e3d1e80631c4d3aafe44678ca937879.png
[rotateY_45deg]: /images/20210725/17cdd2a1e6b348a3a15dee524cec2970.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20210725/dc319f53acec433bbcb1e25f8811bc08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20210725/50976313593544a3a3bd753679273629.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20210725/c79ee235b6e843c88ff53b2a10523103.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20210725/df1844beee1f4ed9af788a8773c91058.png