css变形

css变形

最近又把之前的上学的东西看一下 之前也没有怎么仔细看 这里也是自己在学习和分享一下吧

变形（transform）不影响其它盒子大小

有简写方式：transform：旋转rotate（) 缩放scale() 倾斜skew()

旋转rotate：正负值都可以 默认值rotate

写法： transform：rotate（旋转角度）；

取值：
​ rotate（旋转角度） 默认值 z轴

​ rotateZ（旋转角度）z轴

​ rotateX（旋转角度）x轴

​ rotateY（旋转角度）y轴

比如 transform：rotateX（45deg）；顺时针旋转45 如果-45就是逆时针

缩放（scale）

写法： transform：scale（倍数）；大于1就是放大 小于1就是 缩小

开发建议：放大某个元素时，给父元素添加overflow：hidden；让放大得部分超出盒子隐藏 避免遮挡相邻元素的内容

倾斜（skew）

写法：transform：skew（角度）；

正值向左 负值向右

偏移量（translate）

写法：transform：translate（20px,20px）两个值表示 y和X

设置旋转的点（坐标）origin

transform-origin：X 轴位置 Y轴位置

即X轴与Y轴交叉点是旋转点

其实还有很多有趣的 过渡 动画之内的