八、css transform

@(HTML5)[transform 变换]

[TOC]

八、css transform

transform 2D变换

rotate旋转，只有一个参数

单位角度：deg
复制代码

scale缩放

• 一个参数：水平和垂直同时缩放 transform:scale(1.1)
• 两个参数：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。 可以是负数，如果是负数则会图片翻转

translate位移

• 一个值表示X轴的位移，两个值表示X轴Y轴

skew倾斜

• 一个参数时：表示水平方向的倾斜角度；
• 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。 水平方向对应垂直方向的角，垂直方向对应方向的角 skew的默认原点transform-origin是这个物件的中心点

变换基点

transform-origin

• 默认基点为中心点，可以通过关键词设置坐标值或关键词改变基点

perspective-origin景深基点 在什么方位去看

多方法组合变形

上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法，这里讲介绍综合使用这几个方法来对一个元素进行多重变形。

用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

这四种变形方法顺序可以随意，但**不同的顺序导致变形结果不同，原因是变形的顺序是从左到右依次进行，这个用法中的执行顺序为1.rotate 2.scalse 3.skew 4.translate 并且，每个变形之间用“空格”分隔符，而不是“，”**。

transform 3D变换

变换风格transform-style

• flat：没有3D效果。不是默认值。这个值js改变值的时候用
• preserve-3d：子元素将有3D的效果

perspective景深，近大远小

景深给爷爷，风格给父亲

3D 属性

3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；

translate3d(tx,ty,tz)

其属性值取值说明如下：

tx：代表横向坐标位移向量的长度； ty：代表纵向坐标位移向量的长度； tz：代表Z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。

3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；

scale3d(sx,sy,sz)

sx：横向缩放比例； sy：纵向缩放比例； sz：Z轴缩放比例；

3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；

rotate3d(x,y,z,a)

x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值； y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值； z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值； a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

下面介绍的三个旋转函数功能等同：

rotateX(a)函数功能等同于rotate3d(1,0,0,a) rotateY(a)函数功能等同于rotate3d(0,1,0,a) rotateZ(a)函数功能等同于rotate3d(0,0,1,a)

3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。