这篇文章中我们将会来介绍css3中一个非常实现的样式：变换。它能非常完美的实现元素在二维或者三维空间中的移动，放置和缩放等操作。从这个系列文章的初衷考虑出发，我们在这篇文章中主要介绍二维变换的实现。
变换在css3中通过transform属性来实现。transform字面上就是变形，改变的意思。在CSS3中transform常见应用时主要包括以下几种：移动translate,旋转rotate和缩放scale，现在我们就主要介绍transform如何实现元素在二维平面上的移动，旋转和缩放。
很明显，先要了解一下二维平面的概念，维可以理解为方向，那二维平面的意思就是指两个方向的平面，说白了对于我们前端人员而言就是我们平时所说的平面，或者我们平时所说的拥有x,y两个方向的坐标系：x正方向水平向右，y轴正方向垂直向下：
如果这个平面上有一个元素，那么我们就可以使用transform实现元素在这个平面中的位置变换，角度旋转和大小缩放。
首先来看下移动translate，它的作用是能够实现元素在二维平面中的位置变换(移动)，在之前我们如果想实现元素的位置变换可能需要使用定位，操作起来可能比较麻烦，而transform实现位置变换的语法非常简单，它有三个常见的方法：
transform:translate(x,y); // 实现元素在x和方向上的位置变换，可以为负值，负值代表向x,y的反方向偏移
transform:translateX(x);// 实现元素在x方向上的偏移
transform:translateY(x);// 实现元素在y方向上的偏移
这里x,y的单位可以是px,也可以是百分比，我们先从简单的px入手。
举个栗子：我希望单击一个元素，让这个元素的水平位置发生变化，我们通过translate来实现：
div {
width: 100px;
height: 100px;
background-color: #f00;
/* 这里为了效果更好看，添加了transition过渡效果，在下一篇文章中会介绍 */
transition: transform 1s;
}
div:active{
cursor: pointer;
/* 添加translate偏移变换 */
transform: translate(500px,0);
/* transform: translateX(500px); */
}
细节：变换效果执行完毕后，松开鼠标会自动的还原到元素的原始状态
可以体会到使用transform是多么的简便。y方向的实现方式也是一样的，小伙伴们亲自试一试哦
这里，重点想进行说明的就是百分比做为单位了。百分比是参照元素自身宽高的，如果将transform-origin的值设置为50% 50%，那么就相当于是元素正中心了，这本身没有什么好奇怪的，但是如果它和定位一起使用，就可以实现一个在日常网页制作中的一个常见需求：任意元素水平垂直居中
我们知道，如果想让一个块级元素在父容器中水平居中，可以使用margin:0 auto,但是如果想让这个块级元素在父容器中垂直居中就没有这么简单了。有小伙伴肯定想到使用margin-top等样式来实现，但是如果这个被嵌套的块级元素的高度发生了变化，那么margin-top的值就需要重新设置，这显示不灵活也不能满足我们的需要，这个时候translate就可以大显身手了。
首先搞清楚：
1.定位的百分比参照是参照父容器的
2.transform的translate的百分比参照是参照元素自身的。
我们先创建两个div,添加一些常规的样式：
.box{
width: 400px;
height: 400px;
background-color: pink;
}
.sub{
width: 100px;
height: 100px;
background-color: skyblue;
}
------------html结构----------------
<div class="box">
<div class="sub"></div>
</div>
正面我们先添加定位，子绝父相，设置定位值为top:50% .left:50%
.box{
width: 400px;
height: 400px;
background-color: pink;
position: relative;
}
.sub{
width: 100px;
height: 100px;
background-color: skyblue;
/* 添加定位 */
position: absolute;
left:50%;
top:50%;
}
现在，是时候让translate来实现最后一步了。再重温一下，translate是参照元素本身的宽高，我们看上图，以现如果想让元素水平垂直都居中，很明显的操作就是让元素再往之前定位的反方向偏移元素宽高的一半，显然，在这里，translate就是来干这事儿的：
.sub{
width: 100px;
height: 100px;
background-color: skyblue;
/* 添加定位 */
position: absolute;
left:50%;
top:50%;
/* translate偏移当前元素宽高的一半--反方向 */
transform: translate(-50%,-50%);
}
嗯。完美，这种处理方式以后常用...嗯。要考的！！
接下来我们来学习transform中的旋转rotate.rotate的单词意思是旋转，所以很明显它可以实现元素在二维平面中的旋转。我们知道，旋转必须有一个旋转轴，二维旋转的旋转轴默认穿过元素的几何中心垂直向外(想像一下就如同你从正前方看着屏幕，从一根和屏幕垂直的轴穿过屏幕正中心指向你)，想像不出？没事，代码解决一切：我希望单击一个元素之后，能让这围绕旋转轴旋转360度
首先，有必要了解rotate实现的语法：
transform:rotate(*angle);//angle是指角度，如果是正值，则顺时针方向旋转，负值则逆时针方向旋转
好，上代码：
div {
width: 100px;
height: 100px;
background-color: #f00;
/* 这里为了效果更好看，添加了transition过渡效果，这里不用纠结，在下一篇文章中会介绍 */
transition: transform 3s;
}
div:active{
cursor: pointer;
/* 添加translate旋转变换,这里记得添加单位deg，这里正值代表顺时针方向旋转 */
transform: rotate(360deg);
}
最后我们来看一下transform之缩放scale.从scale这个单词就应该可以猜到它是实现元素在二维平面中的缩放的，先关注语法：
scale(x[,y]?); //定义 2D 缩放转换。如果没有定义第二个参数，则x和y方向上都执行相同的缩放，一般应该设置为正值，如果大于1则放大，小于1则缩小，1则不进行缩放
scaleX(x); //通过设置 X 轴的值来定义缩放转换。
scaleY(y); //通过设置 Y 轴的值来定义缩放转换。
来一波代码送给各位：
div {
width: 100px;
height: 100px;
background-color: #f00;
margin:200px auto;
/* 这里为了效果更好看，添加了transition过渡效果，在下一篇文章中会介绍 */
transition: transform 3s;
}
div:active{
cursor: pointer;
/* 添加translate缩放变换 */
transform: scale(2);
}
根据上面的语法 说明，这个样式会让元素在x,y方向上都放大为原来的两倍
综合旋转和缩放我们可以看到，在进行变换的时候，其实是有一个参数点的，这个参照点就是元素的几何正中心，例如，旋转是围绕元素几何中心垂直向外的轴旋转的，缩放也是以元素几何正中心做为参照点进行缩放的。那假如我希望在进行这些变换的时候能够自己指定参照点，应该如何实现了。
这里就需要重点介绍一个属性了：transform-origin,它的主要作用就是让我们在进行transform动作之前可以改变元素的参考点位置，因为我们元素默认参考点就是其几何中心位置，它的设置稍稍有些复杂，我们静下心来看：
transform-origin:X,Y;
说明：x,y的值常见的设置类型有：百分比，px,关键字。这里的px是参照元素的左上角，关键字是参照整个元素，百分比是参照元素本身大小
常见关键字有：
x方向：left,center,right
y方向：top,center,bottom
我们先从最容易理解的关键字开始，我们以之前所学习过的旋转为例来理解transgorm-origin的使用
div {
width: 100px;
height: 100px;
background-color: #f00;
margin:100px auto;
/* 这里为了效果更好看，添加了transition过渡效果，在下一篇文章中会介绍 */
transition: transform 3s;
/* 设置旋转轴心位置:水平方向left,垂直方向top === 左上角 */
transform-origin: left top;
}
div:active{
cursor: pointer;
/* 添加translate旋转变换,这里记得添加单位deg */
transform: rotate(180deg);
}
其它的关键字一试便知！！我们也可以设置px,这些px值默认参照元素的左上角(transform-origin: left top; 等价于 transform-origin: 0 0;)，请看以下示例：
div {
width: 100px;
height: 100px;
background-color: #f00;
margin:100px auto;
/* 这里为了效果更好看，添加了transition过渡效果，在下一篇文章中会介绍 */
transition: transform 3s;
/* 设置旋转轴心位置:以左上角做为参数往x轴正方向延伸20px,y正方向延伸20px */
/* transform-origin: left top; */
transform-origin: 20px 20px;
}
好了，关于transform二维变换的内容我们就介绍了这么多，在下一篇文章中，我们将会使用到今天所讲到的内容，小伙伴们可以先加以练习，再进入到下一篇文章哦！
