Transform字面上就是变形，改变的意思。在css3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

语法

transform ： none | <transform-function> [ <transform-function> ]*

也就是：transform: rotate | scale | skew | translate |matrix;

none:表示不进么变换；

<transform-function>表示一个或多个变换函数，以空格分开；

换句话说就是我们同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，但这里需要提醒大家的，以往我们叠加效果都是用逗号（“，”）隔开，但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。

一、旋转rotate

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

如：transform:rotate(30deg):

来看一个rotateY的例子：

html代码：

<div class="parent">
  <div class="children"></div>
</div>

CSS代码：

.parent{
  width:600px;
  height:200px;
  background:#000;
  padding:100px 0;
  margin:0 auto;
  -webkit-perspective:800;
}
.children{
  width:200px;
  height:200px;
  background: #e8eb10;
  margin:0 auto;
  -webkit-transform:rotateY(50deg);
}

scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。

四、扭曲skew

扭曲skew和translate、scale一样同样具有三种情况：

skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；

skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；

skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形），

具体使用如下：

transform:skew(30deg,10deg)

skewX() ：按给定的角度沿X轴指定一个skew transformation（斜切变换）。

skewX是使元素以其中心为基点，并在水平方向（X轴）进行扭曲变行，同样可以通过transform-origin来改变元素的基点。

如：transform:skewX(30deg)

skewY() ：按给定的角度沿Y轴指定一个skew transformation（斜切变换）。

skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向（Y轴）扭曲变形。

同样我们可以通过transform-origin来改变元素的基点。

如：transform:skewY（10deg）

五、矩阵matrix

matrix(<number>, <number>, <number>, <number>, <number>, <number>) ： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果有感兴趣的朋友可以去了解更深层次的martix使用方法，这里就不多说了。

改变元素基点transform-origin

他的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置，因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。但有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。下面我们主要来看看其使用规则：

transform-origin(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%;如果只取一个值，表示垂直方向值不变，我们分别来看看以下几个实例

(2)transform-origin:right

(3)transform-origin(25%,75%)

更多的改变中心基点办法，大家可以在本地多测试一下，多体会一下，这里还要提醒大家一点的是，transform-origin并不是transform中的属性值，他具有自己的语法，前面我也说过了，说简单一点就是类似于我们的background-position的用法，但又有其不一样，因为我们background-position不需要区别浏览器内核不同的写法，但transform-origin跟其他的css3属性一样，我们需要在不同的浏览内核中加上相应的前缀，下面列出各种浏览器内核下的语法规则：

-moz-transform-origin: x y; //Mozilla内核浏览器：firefox3.5+
-webkit-transform-origin: x y; //Webkit内核浏览器：Safari and Chrome 
-o-transform-origin: x y ;//Opera  
-ms-transform-origin: x y; //IE9 
transform-origin: x y ;//W3C标准

transform在不同浏览器内核下的书写规则

//Mozilla内核浏览器：firefox3.5+ 
-moz-transform: rotate | scale | skew | translate ; 

//Webkit内核浏览器：Safari and Chrome 
-webkit-transform: rotate | scale | skew | translate ;

//Opera 
-o-transform: rotate | scale | skew | translate ; 

//IE9 
-ms-transform: rotate | scale | skew | translate ; 

//W3C标准
transform: rotate | scale | skew | translate ; 

链接: https://www.fly63.com/article/detial/5610