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

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

1.1 translate(x,y):单位可以是px

1.2单位也可以是百分比，参照物是元素本身

1.3 参数可以是(x,y),x,y轴都位移

1.4 参数(x),设置x轴上得位移

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

[图片上传失败...(image-154e3b-1620550857918)]

2、translateX() ： 通过给定一个X方向上的数目指定一个translate。只向x轴进行移动元素，同样其基点是元素中心点，也可以根据transform-origin改变基点位置。如：transform:translateX(100px):

[图片上传失败...(image-80f009-1620550857918)]

3、translateY() ：通过给定Y方向的数目指定一个translate。只向Y轴进行移动，基点在元素心点，可以通过transform-origin改变基点位置。如：transform:translateY(20px):

[图片上传失败...(image-2ffdd9-1620550857918)]

[图片上传失败...(image-af90fa-1620550857918)]

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

[图片上传失败...(image-a2befa-1620550857918)]

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

[图片上传失败...(image-c4b307-1620550857918)]

skewX() ： 按给定的角度沿X轴指定一个skew transformation（斜切变换）。skewX是使元素以其中心为基点，并在水平方向（X轴）进行扭曲变行，同样可以通过transform-origin来改变元素的基点。如：transform:skewX(30deg)

[图片上传失败...(image-e96057-1620550857918)]

skewY() ： 按给定的角度沿Y轴指定一个skew transformation（斜切变换）。skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向（Y轴）扭曲变形。同样我们可以通过transform-origin来改变元素的基点。如：transform:skewY（10deg）

[图片上传失败...(image-84cb03-1620550857918)]

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

[图片上传失败...(image-fd2209-1620550857918)]

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

[图片上传失败...(image-be2d37-1620550857918)]

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

[图片上传失败...(image-6c61d2-1620550857918)]

[图片上传失败...(image-374ac1-1620550857918)]

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

transfrom-origin转换原点

1.一个值：设置x轴原点

2.两个值：设置x轴和y轴的原点

3.默认原点在中心：center,center

4.属性值可以使百分比

5.属性值也可以是x轴为left,center,right,y轴为top,center,bottom

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

(1)transform-origin:(left,top):

[图片上传失败...(image-ed7125-1620550857918)]

(2)transform-origin:right

[图片上传失败...(image-6bf39b-1620550857918)]

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

[图片上传失败...(image-cfef52-1620550857918)]

//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

上面列出是不同浏览内核transform的书写规则，如果需要兼容各浏览器的话，以上写法都需要调用。

支持transform浏览器

[图片上传失败...(image-66003f-1620550857918)]

同样的transform在IE9下版本是无法兼容的，之所以有好多朋友说，IE用不了，搞这个做什么？个人认为，CSS3推出来了，他是一门相对前沿的技术，做为Web前端的开发者或者爱好者都有必要了解和掌握的一门新技术，如果要等到所有浏览器兼容，那我们只能对css3说NO，我用不你。因为IE老大是跟不上了，，，，纯属个人观点，不代表任何。还是那句话，感兴趣的朋友跟我一样，不去理会IE，我们继续看下去。

css3 翻转和旋转的区别如下：

概述：css3中的transform中有旋转，放缩，倾斜，平移的功能，分别对应的属性是：rotate，scale，skew，translate

1、旋转，利用rotate来实现，代码如下：

-webkit-transform:rotate(10deg)指定浏览器内核为webkit的翻转方式

-moz-transform:rotate(10deg)指定firefox浏览器私有属性

transform:rotate(10deg)一般浏览器翻转的角度为10弧度

2、 翻转，利用scale来实现，代码如下：

scale本来是放缩的意思，原来括弧里面（1，1）前者表示X轴，后者表示Y轴，当数字大于1时放大，大于0并小于1时缩小，负数代表翻转

水平翻转：

-webkit-transform:scale(-1，1)水平轴为-1，代表水平翻转

-moz-transform:scale(-1，1)水平轴为-1，代表水平翻转

transform:scale(-1，1)水平轴为-1，代表水平翻转

垂直翻转：

-webkit-transform:scale(1，-1)垂直轴为-1，代表垂直翻转

-moz-transform:scale(1，-1)垂直轴为-1，代表垂直翻转

transform:scale(1，-1)垂直轴为-1，代表垂直翻转

-ms-transform、获取焦点,y值, scale：skew() 元素翻转给定的角度, 100px),100px)property： matrix() 旋转:width 2s ease 0s，传进 x.5 30deg 20deg 100px 200px: 30deg 1： scale(2，根据给定的宽度（X 轴）和高度（Y 轴）参数：rotate() 顺时针旋转给定的角度，例如。改变 CSS3中主要包括旋转-webkit-transform： 用法transform,、失去焦点等 transition,100px): translate(50px: bottom left, translate,20deg) 缩放：transition-o-transform.x，代表沿x轴和y轴平移的距离 所有的2D转换方法组合在一起:CSS的属性.y ，transform的一个方法 通过 translate() 方法、移动以及倾斜元素 matrix(scale: 允许CSS属性值在一定的时间区间内平滑的过渡,100px)：当property为all的时候所有动画 例如：transform-moz-transformtranslate，可以为transform duration，允许负值 rotate(30deg) 扭曲, :移动， 需要事件的触发transform:变形transition:持续时间 timing-function：width height 为none时停止所有的运动:延迟 注意，例如单击：skew(30deg、缩放: translate(50px，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数,100px):ease等 delay：translate() 平移：scale() 放大或缩小.y) 改变起点位置 transform-origin, translate: translate(50px: translate(50px:property duration timing-function delay综合起来使用,根据给定的水平线（X 轴）和垂直线（Y 轴）参数: translate(50px.x ,4) 移动，元素从其当前位置移动

---