深入探讨：CSS3 2D转换
转换模块是CSS3中的一项重大功能，它将我们处理网站元素的方式提高了一个层次。
还有一些实验中，真正给我带来惊喜，例子如这一个 。 但是，我们不会构建类似CSS的图标之类的东西，它可以以某种方式转换为Autobot ，因为它可能会让人不知所措，并且在现实生活中也不太实用。
取而代之的是，这次，我们将退后一步，回顾一下CSS3 2D转换的基础知识，以了解它在基本层面上是如何工作的。
语法
CSS3转换模块基本上允许我们在一定程度上转换元素，例如平移，缩放，旋转和倾斜。
官方语法是transform:method(value) 。 但是，就像尚处于早期阶段的其他CSS3的出色补充一样，当前的浏览器仍然需要语法版本来运行转换。 因此，完整的语法如下所示：
transform: method(value); /* W3C Official Syntax */ -o-transform: method(value); /* Opera 10.5+ */ -ms-transform: method(value); /* Internet Explorer 9.0+ */ -moz-transform: method(value); /* Firefox 3.6+ */ -webkit-transform: method(value); /* Chrome / Safari 3.2+ */
同样，我们上面所指的方法是transform-functions ，可以用以下之一替换： translate() ， scale() ， rotate()或skew() 。
价值
该方法的大多数值将对应于X轴和Y轴 。 如果您还记得高中数学课上的笛卡尔坐标系 ，其基本原理非常相似，X轴表示水平线 ，Y轴表示垂直线。
除旋转外。 旋转将使用 极坐标 ，以度表示，范围从0到360。
所有方法的值都可以为负或正。 不过，请注意一下，因为网页是从上到下顺序读取的，这使得网络中的Y轴与笛卡尔坐标的原始原理相反。 这意味着，当您向Y轴添加负值时，它将移至顶部。
使用转换
现在，让我们看一下下面的基本演示，以了解实际的转换。
我–翻译
不要被术语翻译所迷惑，它不会翻译外语。 这里的translate实际上是一种用于沿某个方向移动元素的方法。
该方法包含两个值； X和Y。 我们上面指出的X值将使元素水平； 向左或向右 ，而Y值会将其垂直移至底部或顶部 。
现在，让我们看下面的一些简单演示：
div {
width: 100px;
height: 100px;
transform: translate(100px, 250px);
}
上面的代码段会将元素向右移动100px，向底部移动250px。
div {
width: 100px;
height: 100px;
transform: translate(100px, 0);
}
上面的代码段会将元素向右移动100px，因为我们将Y轴归零。 然后，如果要将元素向左移动，则只需将X轴设置为负数，如下所示：
div {
width: 100px;
height: 100px;
transform: translate(-100px, 0);
}
另外，我们可以使用这些单独的方法在单个方向上移动元素。 translateX()和translateY()的区别在于，这些方法中的每个仅接受一个值。
因此，实际上， transform: translate(-100px, 0)也等于transform: translateX(-100px) 。
II –规模
scale方法使我们可以根据其实际大小来放大或缩小元素。 比例尺的值与上面的translate方法相同，还包含X和Y。唯一的区别是我们未指定单位。 这是一个例子：
div {
width: 100px;
height: 100px;
transform: scale(1.5);
}
上面的示例将把div放大为其实际大小的 1.5或150％ ，并且由于我们在X和Y方向上均等地缩放了它，因此我们只需要在一个值中声明它即可。 您也可以通过以下方式声明它transform: scale(1.5,1.5); 如果您想获得更多细节，它将执行相同的操作。
此外，如果要减少元素，我们将使用从0.999到绝对0的值，如下面的示例所示，它将div的大小减少50％或一半：
div {
width: 100px;
height: 100px;
transform: scale(0.5);
}
但是，请谨慎，如果将值设置为绝对“ 0”，则div只会消失，因此，除非您有正当的理由，否则我不建议您这样做。
III –旋转
正如我们在本文前面提到的那样， rotate方法使用极坐标，因此该值以度表示。 这是两个例子
下面的代码段将使div顺时针旋转30度。
div {
width: 100px;
height: 100px;
transform: rotate(30deg);
}
如下例所示，负值将使div沿相反方向（逆时针）旋转相同的角度。
div {
width: 100px;
height: 100px;
transform: rotate(-30deg);
}
IV –偏斜
skew方法使我们能够创建一种平行四边形。 它还包含X轴和Y轴的两个值。 但是，值本身以度表示，而不是像scale或translate方法那样使用线性测量。 这是一个例子：
div {
width: 200px;
height: 100px;
transform: skew(30deg, 10deg);
}
V –多种方法
transform属性不限于仅处理一种方法，实际上我们可以在单个声明中包含多个方法，如下所示：
div {
width: 100px;
height: 100px;
transform: translateX(100px) rotate(45deg);
}
上面的代码片段会将元素向右移动100px，同时还将旋转45度。
“多种方法”演示 。
转换原点
顾名思义， transfrom-origin用于控制转换的起点。 如果我们不使用以下语法transform-origin: XY;显式声明此属性transform-origin: XY; ，那么浏览器将采用默认值，X的默认值为50％，Y的默认值为50％。
现在，如果将transform-origin指定为0（X）0（Y），则转换将从左上角开始。
同样，所有浏览器仍然需要前缀版本来调用此属性。 因此，以下是完整版本，以确保它可以在大多数当前浏览器中使用：
-webkit-transform-origin: X Y; -moz-transform-origin: X Y; -o-transform-origin: X Y; -ms-transform-origin: X Y; transform-origin: X Y;
结论
我们已经经历了所有四种基本的转换方法； 平移，缩放，旋转和倾斜
但是，如前所述，该模块仍处于初期阶段，因此，如果您将在下一个网站中应用这些方法，请确保针对不兼容的浏览器正常降级（在这里我不是指IE6）。
最后，您可以查看所有演示或从以下链接下载源。