CSS3中transform属性
CSS3中transform属性
在css3中transform主要包括:
1、旋转(rotate)
rotate()在一个给定度数顺时针旋转的元素。负值表示元素按逆时针旋转。单位deg,设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转
transfrom: rotate(30deg);
2、扭曲(skew)
skew()包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反的方向倾斜
skewX():表示只在X轴(水平方向)倾斜
skewY():表示只在Y轴(垂直方向)倾斜
倾斜/扭曲;参数表示倾斜角度,单位deg
skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度进行扭曲变形),如:
transfrom: skew(30deg,30deg);
skewX(x)仅是元素在水平方向扭曲变形(X轴扭曲变形),如:
transfrom: skewX(30deg);
skewY()仅是元素在水平方向扭曲变形(Y轴扭曲变形),如:
transfrom: skewY(30deg);
3、缩放(scale)
scale():该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数。用于对元素进行缩放,可以通过transform-orgin对元素的基点进行设置,同样基点在元素中心位置;基中X表示水平方向缩放的倍数,Y表示垂直方向的缩放倍数,而Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的,并以X为准。
transform: scale(2,1.5);
sccleX():使用[sx,1]缩放矢量执行缩放操作,sx为所需参数。scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1)
transfrom: scaleX(2);
sccleX():使用[1,sy]缩放矢量执行缩放操作,sy为所需参数。scaleY表示元素只在Y轴(水平方向)缩放元素
transfrom: scaleY(2);
4、移动(translate)
tarnslate()根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动),向右向上为证书,向左向下位移则为负“-”,translateX(x)仅水平方向移动(X轴移动)。translateY(Y)仅垂直方向移动,使用方法如下:
translate: translate(100px, 20px);
translate: translateX(100px);
translate: translateY(20px);
5、矩阵变形(matrix)
matrix()和2D变换方法合并成一个。matrix方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
矩阵:matrix 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵
改变元素基点transform-orgin
2D转换元素能够改变元素x和y轴。transform-orgin(x,y):用了设置元素的运动的基点(参照点)。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px,其中x也可以是字符参数值left,center,right;
Y和X一样除了百分值以外还可以设置top,center,bottom,这个看上去有点像background-position设置一样,对应写法如下:
1、top left | left top 等价于 0 0 | 0% 0%
2、top | top center | center top 等价于50% 0
3、right top | top right 等价于 100% 0
4、left | left center | center left 等价于 0 50% | 0% 50%
5、center | center center 等价于 50% 50%
6、right | right center | center right 等价于 100% 50%
7、bottom left | left bottom 等价于 0 100% | 0% 100%
8、bottom | bottom center | center bottom 等价于 50% 100%
9、bottom right | right bottom 等价于 100% 100%
left,center,right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%而top center bottom 是垂直方向的取值,其中top=0%;center=50%; bottom=100%;如果只取一个值,表示垂直方向值不变
transform-orgin:(left,top);
transform-orgin:right;
transform-orgin:(25%,75%);
以上内容出自作者:
https://blog.csdn.net/qq449245884/article/details/105489665