CSS3中的Transform
二 28 七月 2015
CSS3中的Transform
HTML5和CSS3的火爆程度自不必说，很多同学可能说我们不是专门的Web前端工程师呢，所以并不用关心这个，但我觉得吧，做我们开发这行儿的，还是不要用这样儿的借口来为自己开脱的好，至少，我们要为了成为全栈工程师而努力不是？那么这里我们来看一下CSS3里制作动画的几个属性：变形（Transform）、转换（Transition）和动画（Animation）等。今天我们这篇文章主要介绍的是这三个属性中的第一个——变形（Transform）。
那么所谓Transform，在CSS3中主要包括一下集中：旋转Rotate、扭曲Skew、缩放Scale和移动Translate以及矩阵变形Matrix等。下面我们看下具体如何实现。
Transform语法：
transform : none | <transform-function> [ <transform-function>]*
/*也就是*/
transform: rotate | scale | skew | translate | matrix;
解释说明：
none：表示不进行变换；
<transform-function>表示一个或多个变换函数，以空格分开；换句话说就是我们同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，但这里需要大家注意，以往我们叠加效果都是用逗号（“,”），但Transform中使用多个属性时却需要用空格隔开。
取值：
Transform属性实现了一些可用SVG实现的同样的功能，它可用于内联（inline）元素和块级（block）元素，它允许我们旋转、缩放和移动元素，他有几个属性值参数：rotate、translate、scale、skew、matrix。
一、旋转rotate
rotate(
二、移动translate
移动translate我们分为三种情况：translate(x, y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(y)仅垂直方向移动（Y轴移动），具体使用方法如下：
1、translate(<translation-value>[, <translation-valuie>]) ：通过矢量[tx, ty]指定一个2D translation，tx是第一个过渡值参数，ty是第二个过渡值参数选项。如果未被提供，则ty以0作为它的默认值，也就是translate(x, y)，它表示对象进行评议，按照设定的x, y 参数值，当值为负数时，反方向移动物体，其基点默认为元素中心点，也可以根据transform-origin改变基点。如transform:translate(100px, 20px):
2、translateX(<translate-value>) ：通过给定一个X方向的数值指定一个translation，只向X轴进行移动元素，同样，其基点是元素中心点，也可以根据transform-origin改变基点位置。如transform:translateX(100px):
3、translateY(<translate-value>) ：通过给定一个Y方向的数值指定一个translation，只向Y轴进行移动元素，基点在元素中心点，可以通过transform-origin改变基点位置。如transform:translateY(20px):
三、缩放scale
缩放scale和移动translate极其相似，它也具有三种情况：scale(x, y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放——；scaleX(x)元素仅水平缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1，元素就放大；反之其值小于1，元素就缩小。下面我们具体看看着三种情况的使用方法：
1、scale(<number>[, <number>]]) ：提供执行[sx, sy]缩放矢量的两个参数指定一个2D scale（2D缩放）。如果第二个参数未提供，则取和第一个参数一样的值。scale(X, Y)是用于对元素进行缩放，可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；其中X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，如果没有设置Y值，则表示X， Y两个方向的缩放倍数是一样的，并以X为准。如transform:scale(2, 1.5):
2、 scaleX(<number>) ：使用[sx, 1]缩放矢量执行缩放操作，sx作为所需参数。scaleX表示元素只在X轴（水平方向）缩放元素，它的默认值是(1, 1)，其基点一样是在元素的中心位置，我们同样是通过transform-origin来改变元素的基点。如transform:scaleX(2):
Category: 技术生活