前言
大家好,我是cv竹叶,我一直对:transition过度
、animation动画
、transform变换
,这些属性摸不着头脑,就像是对初恋一样让人迷惑。
今天,我要用3分钟,就理解其中的transform变换
!
什么?你想看transition过度
的理解?那就点这里 3分钟看懂过度【transition】
今天,我要用3分钟,就理解其中的transform变换属性
!
transform属性
transform就是变换位置或改变形状,都是围绕着x轴,y轴,z轴,默认中心点来进行变换的。
transform属性值,可以移动、旋转、放大缩小,下面我们就来一一了解一下:
1、旋转
rotate(n deg)
旋转,围绕中心点2D旋转n度,单位为deg。如果n中的值为正数则顺时针旋转,如果是负值则逆时针旋转,deg代表旋转角度
rotateX(n deg)
旋转,以x轴为旋转中心,上下翻转n度。
rotateY(n deg)
旋转,以y轴为旋转中心,左右翻转n度。
rotateZ(n deg)
旋转,以z轴为旋转中心,平面翻转n度。相当于rotate(n deg)
rotate3d(x,y,z,n deg)
3d旋转,其实是上面几个的结合旋转,同时对x、y、z轴进行旋转n度。旋转轴由一组 [x, y, z] 矢量定义,如果这些矢量被赋予非标准值,即3个坐标值的平方和不等于1时,它将会被内部隐式标准化。非标准矢量,例如空值和 [0, 0, 0],将会使旋转不起作用。(此处我也不太懂,欢迎补充)
顺时针旋转30度:
transform: rotate(30deg);
逆时针旋转30度:
transform: rotate(-30deg);
上下翻转30度:
transform: rotateX(30deg);
左右翻转30度:
transform: rotateY(30deg);
同时对x、y、z轴旋转45度:
transform: rotate3d(1,1,1,45deg)
2、移动
translate(x,y)可传入两个参数,等同于translateX(x)、translateY(y)。
如果x是正值。则向右移动x。负值则向左移动x。
如果y是正值。则向下移动y。负值则向上移动y。
x、y可以是px值,也可以是%值。
translate(x,y)
移动,盒子整体向x、y方向移动x、y大小距离。
translateX(x)
移动,盒子整体向x方向移动x大小距离。
translateY(y)
移动,盒子整体向y方向移动y大小距离。
同时向x、y方向移动:
transform: translate(100px,120px);
只移动x方向,在原来的div宽度上,移动10%:
transform: translateX(10%);
只移动y方向,在原来的div高度上,移动10%:
transform: translateY(10%);
3、缩放
scale缩放,其实和translate移动及其相识,只是缩放的过程中心点是不会移动的。
缩放基数就是1,n是相对于1的多少倍:
- 如果n>1,则是放大n-1倍
- 如果n<1,则是缩小1-n倍
scale(n)
缩放,同时对在x、y轴的大小进行缩放n倍。
scaleX(n)
缩放,对在x轴的宽度进行缩放n倍。
scaleY(n)
缩放,对在y轴的高度进行缩放n倍。
x、y同时放大0.5倍:
transform: scale(1.5);
x、y同时缩小0.5倍:
transform: scale(0.5);
只在x缩小0.5倍:
transform: scaleX(0.5);
只在y放大0.5倍:
transform: scaleY(1.5);
4、扭曲(倾斜)
skew扭曲,其实是对x、y的拉伸。有效值在90度之内,大于90度就会向反方向拉伸。
skew(x deg,y deg)
扭曲,向x、y轴进行拉伸盒子x、y度,达到扭曲效果。
skewX(x deg)
扭曲,向x轴进行拉伸盒子x度,达到扭曲效果。
skewY(y deg)
扭曲,向y轴进行拉伸盒子y度,达到扭曲效果。
对x、y轴进行拉伸扭曲30度:
transform: skew(30deg,30deg);
对y轴进行拉伸扭曲30度:
transform: skewY(30deg);
对x轴进行拉伸扭曲30度:
transform: skewX(30deg);
还有matrix矩阵
和perspective元素距视图
,这两个比较复杂,有兴趣的小伙伴可以查查!反正3分钟内看不懂的啦!
transform兼容性
根据canius,可以知道兼容性,ie8以下是不支持的
总结
变换可以让我们的模块移动起来、变形放大缩小,满足日常开发中页面样式的需求。如果有帮到你的话,求求点个赞吧!