[JavaScript知识库]css-样式 transform旋转效果

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);

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖