css transform 角度,CSS 中 transform属性的使用及理解

概念

Transform字面意思就是变形，改变的意思，该元素应用于2D和3D转换，该属性允许我们i元素进行旋转、缩放、移动和倾斜。在css3中transform主要包括以下几种：

旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

语法

transform: rotate | scale | skew | translate | matrix;

注意：表示一个或者多个函数变换的时候是以空格分开而不是逗号。

transform属性实现了一些可用SVG实现的同样功能，它可用于内联(inline)函数和块级(block)元素，它允许我们旋转，缩放和移动元素。他有几个属性值参数：rotate;translate;scale;skew;matrix。

旋转rotate

旋转 rotate

通过指定的角度参数对原元素指定一个2D 旋转和3D旋转，需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。

rotate():2D旋转

transform: rotate(45deg);

rotateX():沿着X轴3D旋转

transform: rotateX(45deg);

rotateY():沿着Y轴3D旋转

transform: rotateY(45deg);

rotateZ():沿着Z轴3D旋转

transform: rotateZ(45);

rotate3d(x,y,z,angle):3D旋转，接受四个参数，x,y,z介于0-1之间，angle是旋转的度数。元素围绕着xyz在空间中确定的唯一坐标点和原点之间的连线旋转指定的角度，这就是rotate3D。

transform: rotate3D(1,1,1,45deg);

移动 translate

移动translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)；translateX(x)仅水平方向移动(X轴移动)；translateY(Y)仅垂直方向移动(Y轴移动)，具体使用方法如下：

translateX(x) ， 沿 X 轴位移

translateX(x) ， 沿 X 轴位移

translateY(y), 沿Y移动

translateY(y) //沿y移动

ranslateZ(z) ， 沿 Z 轴位移，需要配合perspective属性一起使用

transform: translateZ(20px);

translate(x, y) ， 沿 X Y 轴位移

transform: translate(20px,30px);

通过矢量(x,y)指定一个2D translation，x 是第一个过渡值参数，y 是第二个过渡值参数选项。如果未被提供，则y以 0 作为其值。也就是translate(x,y),它表示对象进行平移，按照设定的x,y参数值,当值为负数时，反方向移动物体，其基点默认为元素中心点，也可以根据transform-origin进行改变基点。如transform:translate(100px,20px):

translate3d(x, y, z) ， 沿 X Y Z 轴位移

transform: translate(20px, 20px, 20px);

缩放 scale

缩放scale和移动translate是极其相似，他也具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)；scaleX(x)元素仅水平方向缩放(X轴缩放)；scaleY(y)元素仅垂直方向缩放(Y轴缩放)，但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。下面我们具体来看看这三种情况具体使用方法：

scale([, ])：提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale(2D缩放)。如果第二个参数未提供，则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放，可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；基中X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。如：

transform:scale(2,1.5):

scaleX() ： 使用 [sx,1] 缩放矢量执行缩放操作，sx为所需参数。scaleX表示元素只在X轴(水平方向)缩放元素，他的默认值是(1,1)，其基点一样是在元素的中心位置，我们同样是通过transform-origin来改变元素的基点。如：

transform:scaleX(2):

scaleY() ： 使用 [1,sy] 缩放矢量执行缩放操作，sy为所需参数。scaleY表示元素只在Y轴(垂直方向)缩放元素，其基点同样是在元素中心位置，可以通过transform-origin来改变元素的基点。如:

transform:scaleY(2):

扭曲 skew

扭曲skew和translate、scale一样同样具有三种情况：skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形)；skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形)；skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)，具体使用如下:

skewX(angle) - 沿 X 轴的 2D 倾斜

transform: skewX(45deg);

skewY(angle) - 沿 Y 轴的 2D 倾斜

ransform: skewY(45deg);

skew(angle-x, angle-y) - 沿 X Y 轴的 2D 倾斜

transform: skewY(45deg, 45deg);

X轴Y轴上的skew transformation(斜切变换)。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。同样是以元素中心为基点，我们也可以通过transform-origin来改变元素的基点位置。如：transform:skew(30deg,10deg):

前面我们也提到过transform-origin它的主要作用是让我们在进行transform动作之前可以改变元素的之前的位置。因为元素的默认中心点就是其中心位置。