CSS3 transform-origin属性设置元素旋转起始位置

傷城~ 2021-07-26 01:27 763阅读 0赞

## CSS3 transform-origin属性设置元素旋转起始位置 ##

1.  作用：设置元素旋转的基点位置。注：元素旋转前后基点位置不变。
2.  使用：transform-origin：x-axis y-axis z-axis;
3.  x-axis取值：left、right、center、length、%  
    y-axis取值：top、bottom、center、length、%  
    z-axis取值：length
4.  transform-origin：center center；（默认位置，以元素中心点为基点，相当于50% 50%）  
    transform-origin：left top；（以左上角为基点）  
    transform-origin：right top；（以右上角为基点）  
    transform-origin：center bottom；（以底线中心为基点）  
    其他同理。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center]  
    ![在这里插入图片描述][20201116120104129.gif_pic_center]  
    ![在这里插入图片描述][20201116120213518.gif_pic_center]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 1]
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 2] ![在这里插入图片描述][20200905130736204.png_pic_center]

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

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title></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; transition:0.2s linear; transform-origin:center bottom; } #div2:hover{ transform: rotate(45deg); -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari and Chrome */ } </style>
    </head>
    <body>
    <div id="div1">
      <div id="div2">HELLO</div>
    </div>
    
    </body>
    </html>

**[菜鸟实例][Link 1]**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/48ced7c8158147a3832fbf12e3c50676.png
[20201116120104129.gif_pic_center]: /images/20210725/cb05d30b376f4fee993c8f4260924d95.png
[20201116120213518.gif_pic_center]: /images/20210725/40aacbec4d3a4cccb590e6350fc3105c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/568ba4efddea482897075589ab9b58fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20200905130736201.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA==,size_16,color_FFFFFF,t_70#pic_center
[20200905130736204.png_pic_center]: /images/20210725/d43994c1291b41569c6dd99038c29b04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2NzUwNA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/b513705a2192462fa3a531dde2f9dbaf.png
[Link 1]: https://www.runoob.com/try/try.php?filename=trycss3_transform-origin