什么是css3变形
- 在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理
重点
- 旋转rotate
- 移动translate
- 缩放scale
- 扭曲skew
- 矩阵matrix(此属性有点厉害)
旋转rotate
rotate(<angle>)
:通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义transform-origin
定义的是旋转的基点angle
是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转- 例:
transform:rotate(30deg)
移动translate
- 移动translate我们分为三种情况:
translate(x,y)
水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);
translateX(x)
仅水平方向移动(X轴移动);
translateY(Y)
仅垂直方向移动(Y轴移动)
translate(X,[Y])
- 通过矢量[x, y]指定一个2D translation,x 是第一个过渡值参数,y 是第二个过渡值参数选项。如果 未被提供,则y以 0 作为其值
- 也就是translate(x,y),它表示对象进行平移,按照设定的x,y参数值,当值为负数时,反方向移动物体,其基点默认为元素 中心点,
- 可以根据transform-origin进行改变基点。
- 例:
transform:translate(100px,20px);
translateX(<translation-value>)
translateX(<translation-value>)
: 通过给定一个X方向上的数目指定一个translation。- 只向x轴进行移动元素,同样其基点是元素中心点,
- 可以根据
transform-origin
改变基点位置。 - 例:
transform:translateX(100px);
translateY(<translation-value>)
translateY(<translation-value>)
通过给定Y方向的数目指定一个translation。- 只向Y轴进行移动,基点在元素心点,
- 可以通过
transform-origin
改变基点位置。 - 例:
transform:translateY(20px)
。
缩放scale
- 缩放
scale
和移动translate
是极其相似,他也具有三种情况: scale(x,y)
使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放);scaleX(x)
元素仅水平方向缩放(X轴缩放);scaleY(y)
元素仅垂直方向缩放(Y轴缩放);- 但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小
scale(<number>[, <number>])
scale(<number>[, <number>])
:提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale(2D缩放)。- 如果第二个参数未提供,则取与第一个参数一样的值。
scale(X,Y)
是用于对元素进行缩放,可以通过transform-origin
对元素的基点进行设置,同样基点在元素中心位置;- 其中X表示水平方向缩放的倍数,Y表示垂直方向的缩放倍数,
- Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。
- 例:
transform:scale(2,1.5)
;
scaleX(<number>)
scaleX(<number>)
: 使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数。scaleX
表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1),其基点一样是在元素的中心位置,- 我们同样是通过
transform-origin
来改变元素的基点。 - 例:
transform:scaleX(2)
。
scaleY(<number>)
scaleY(<number>)
: 使用 [1,sy] 缩放矢量执行缩放操作,sy为所需参数。scaleY
表示元素只在Y轴(垂直方向)缩放元素,其基点同样是在元素中心位置,- 可以通过
transform-origin
来改变元素的基点。 - 例:
transform:scaleY(2)