首页 > 代码库 > css变形属性-transform-

css变形属性-transform-

(1)具体常用5种:伸缩-scale、扭曲-skew、旋转-rotate、移动-translate、矩阵-matrix
(a)
scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩 放);scaleX(x)元素仅水平方向缩放(X轴缩放);scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中 心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小
(b)
skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值 进行扭曲变形);skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)
(c)
transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设 置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。如:transform:rotate(30deg)
(d)
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)
(e)
matrix(<number>, <number>, <number>, <number>, <number>, <number>)
(2)相关可用函数:
transform: nonetransform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)transform: translate(12px, 50%)transform: translateX(2em)transform: translateY(3in)transform: scale(2, 0.5)transform: scaleX(2)transform: scaleY(0.5)transform: rotate(0.5turn)transform: skewX(30deg)transform: skewY(1.07rad)transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)transform: translate3d(12px, 50%, 3em)transform: translateZ(2px)transform: scale3d(2.5, 1.2, 0.3)transform: scaleZ(0.3)transform: rotate3d(1, 2.0, 3.0, 10deg)transform: rotateX(10deg)transform: rotateY(10deg)transform: rotateZ(10deg)transform: perspective(17px)transform: translateX(10px) rotate(10deg) translateY(5px)

css变形属性-transform-