旋转,多重转换,缩放-第二十二天
作者:互联网
旋转
目标:使用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表示缩小
标签:多重,scale,转换,原点,缩放,transform,旋转,第二十二 来源: https://www.cnblogs.com/cm666/p/16177336.html