css—transform

简介：transform是CSS3提供用于元素变形的属性，目前支持平移、旋转、缩放和倾斜效果，使用transfrom属性的元素，也不会影响x、y轴上的任何组件。

三维坐标：

2D变形

旋转

rotate(angle) 通过指定的角度参数对元素2D旋转，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(45deg)
位移

translate将元素向指定的方向移动，类似于position中的relative。可以简单的理解为，使用translate(x,y)函数，你可以把元素从原来的位置移动，而不影响在X、Y轴上任何组件。
transform: translate(50px,0);
在translate(x,y)的基础上也可以拆分成translateX(x)和translateY(y) 上面的第二图效果可以写成transform: translateX(50px) translateY(50px);
缩放

缩放scale()函数让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。 transform: scale(1.2);
在scale()的基础上也可以拆分成scaleX()和scaleY()
倾斜

倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 transform: skew(30deg,10deg);
在skew()的基础上也可以拆分成skewX()和skewY()
3D变形

在学习变形函数之前我们先掌握几个属性：transform-style,perspective,perspective-origin

transform-style

transform-style属性规定如何在 3D 空间中呈现被嵌套的元素，此属性要设置在父元素上.
- flat 默认值，所有子元素在2D平面呈现
- preserve-3d 所有子元素在3D空间内呈现。如果设置overflow:hidden，将会失去3d效果，呈现2d效果
perspective

perspective 属性定义 3D 元素距视点的距离，以像素计，此属性要写到父元素内。
- perspective取值为none或不设置，就没有真3D空间。
- perspective取值越小，3D效果就越明显，也就是你的眼睛越靠近真3D。
- perspective的值无穷大，或值为0时与取值为none效果一样。
- 语法
```
perspective: number || none;  
```
  - 1perspective: number || none;
- 值描述 number 元素距离视图的距离，以像素计。
  none 默认值。与 0 相同。不设置透视
  
  除了perspective属性可以激活3D空间，perspective()也可以激活3D空间，不同的是perspective()使用在当前变形的元素上. transform:perspective(600px)
  
  perspective-origin
  
  perspective-origin属性是3D变形中另一个重要属性，主要用来决定perspective属性的源点角度。它实际上设置了X轴和Y轴位置，在该位置观看者好像在观看该元素的子元素。。
  语法
```
perspective-origin: x-axis  y-axis;  
```
  - 1perspective-origin: x-axis y-axis;
- 其属性值可以是：关键词、length、%
  - x-axis指定相对于元素的包含框的X轴上的位置。它可以是长度值（以受支持的长度单位表示）、百分比或以下三个关键词之一：left（表示在包含框的X轴方向长度的0%），center（表示中间点）,或right（表示长度的100%）。
  - y-axis指定相对于元素的包含框的Y轴上的位置。它可以是长度值、百分比或以下三个关键词之一：top（表示在包含框的Y轴方向长度的0%），center（表示中间点），或bottom（表示长度的100%）。
  注意，为了指转换子元素变形的深度，perspective-origin属性必须定义父元素上。通常perspective-origin属性本身不做任何事情，它必须被定义在设置了perspective属性的元素上。换句话说，perspective-origin属性需要与perspective属性结合起来使用，以便将视点移至元素的中心以外位置
- 旋转
  
  CSS33D变形中旋转函数：rotateX()、rotateY()、rotateZ()、rotate3d()
- rotateZ()函数指定元素围绕Z轴旋转，如果仅从视觉角度上看，rotateZ()函数让元素顺时针或逆时针旋转，并且效果和rotate()效果等同，但他不是在2D平面的旋转。
  
  rotate3d(x,y,z,a)
  
  x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
  
  y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
  
  z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
  
  a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
- 位移
  
  在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。
- transform: translate3d(50px,50px,-50px);
- 当我们进行Z轴位移时，如果值大于0，元素会呈现一个放大的效果，当值小于0，元素会呈现一个缩小的效果。
- 缩放
  
  CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数，当scale3d()中X轴和Y轴同时为1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。默认值为１，当值大于１时，元素放大，反之小于１大于0.01时，元素缩小
  
  scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果。下面我们来看一个实例，为了能看到scaleZ()函数的效果，我们添加了一个rotateX(45deg)功能：
- transform-origin
  
  transform-origin用来设置元素的变形原点，默认情况，变形的原点在元素的中心点。
  语法
- transform-origin: x-axis y-axis z-axis;
- 2D的变形中的transform-origin属性可以是一个参数值，也可以是两个参数值。如果是两个参数值时，第一值设置水平方向X轴的位置，第二个值是用来设置垂直方向Ｙ轴的位置。
  
  3D的变形中的transform-origin属性还包括了Ｚ轴的第三个值
  
  这三个值可以是关键词、length、%
  
  为了方便记忆，可以把关键词和百分比值对比起来记
  - top = top center = center top = 50% 0
  - right = right center = center right = 100%或(100% 50%)
  - bottom = bottom center = center bottom = 50% 100%
  - left = left center = center left = 0或(0 50%)
  - center = center center = 50%或（50% 50%）
  - top left = left top = 0 0
  - right top = top right = 100% 0
  - bottom right = right bottom = 100% 100%
  - bottom left = left bottom = 0 100%