旋转,多重转换,缩放-第二十二天

旋转

目标:使用rotate实现元素旋转效果

• 语法

  ​ transform:rotate(角度)

  ​ 注意:角度单位是deg

  ​ 默认参照元素几何中心进行旋转

• 技巧:取值正负均可

  ​ 取值为正,则顺时针旋转

  ​ 取值为负,则逆时针旋转

转换原点

目标:使用transform-origin属性改变转换原点

• 语法

  ​ 默认原点是盒子的几何中心

  ​ transform-origin:原点水平位置 原点垂直位置;

• 取值

  ​ 方位名词(left,top,right,bottom,center)

  ​ 像素单位数值

  ​ 百分百(参照盒子自身尺寸计算)

多重转换

目标:使用transform复合属性实现多形态转换

transform:translate() rotate();

• 多重转换原理

  ​ 旋转会改变网页元素的坐标轴向

  ​ 先写旋转,则后面的转换效果的轴向以旋转后的轴向为准,会影响转换结果

注意:如果添加多次transform,后面的设置会將前面的覆盖,所以要使用复合属性

缩放

目标:使用scale改变元素的尺寸

• 语法

  ​ transform:scale(x轴缩放倍数,y轴缩放倍数)

• 技巧

  ​ 一般情况下,只为scale设置一个值,表示x轴和y轴等比例缩放

  ​ transform:scale(缩放倍数)

  ​ scale值大于1表示放大,scale值小于1表示缩小