css-样式 transform旋转效果

原创于 2022-05-07 22:10:23 发布 · 3.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了CSS3的transform特性，包括rotate按角度旋转元素，改变转换原点以实现特定方向的旋转，以及如何通过复合属性进行多形态转换。此外，还探讨了使用scale实现图片等比例缩放和opacity调整元素透明度的方法。需要注意的是，多个transform属性会按层叠性生效，且应以复合属性形式书写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、rotate按角度旋转

 img {
            width: 250px;
            transition: all 2s;
        }
img:hover {
            /* 顺 */
            transform: rotate(360deg);

            /* 逆 */
            /* transform: rotate(-360deg); */
        }

2、转换原点

transform-origin: right bottom; 按照右下原点旋转

3、transform复合属性-多形态转换

 /* 边走边转 */
 transform: translate(600px) rotate(360deg);
/* 旋转可以改变坐标轴向 不行 */
 /* transform: rotate(360deg) translate(600px); */            
/* 层叠性 不行以后边的为主*/
/* transform: translate(600px);
transform: rotate(360deg); */

4、使用 scale 实现图片的缩放

transform: scale(1.2,1.0); x y 缩放，一般只写一个实现等比列缩放

transform: scale(1.2);放大
transform: scale(0.8);缩小

5、opacity: 透明度

值 0-1

6、transform注意层叠性

两个transform 会覆盖

img:hover {
          transform: translate(600px);
          transform: rotate(360deg); 
        }

只能按照复合属性写

transform: translate(600px) rotate(360deg);