css-样式 transform旋转效果

本文介绍了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);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值