css3--transition
一，转换定义：
1，能够改变元素的形状，尺寸，位置
2，转换分两种：
2D转换：只能在X，Y轴发生改变：
例子：旋转(rotate)、拉伸(scale)、平移(move)、倾斜(skew)
3D转换：除了X，Y轴以外还能Z轴变化。
如：空间旋转。。。
二，转换属性（transform：使用2D，3D）：
1，提示：
目前浏览器并不是完全支持所有的Transform ，IE9、Firefox 和Opera 仅支持2D transforms ，相应的CSS定义为：-ms-transform 、-moz-transform 和-o-transform ，而Safari 和Chrome 都支持2D和3D transforms ，相应的CSS定义为：-webkit-transform 。
2，取值：
transform: none（默认值，表示元素不进行转换）
transform-functions（表示一个或者多个转换函数，中间以空格分开）:
解释：CSS3变形是一些效果的集合，比如平移、旋转、缩放和倾斜效果，每个效果都被称作为变形函数（Transform Function）
写法：
transform：: rotate(angle) scale(x,y)／（0～1的值）skewX(angle) translate(x,y);
3,transform-origin()属性:
1),默认情况，变形的原点在元素的中心点;
写法：transform-origin : 数值/百分比/关键字（left，right，top，bottom）;
一个值：表示所有轴的位置
两个值：表示 X 轴和 Y 轴
三个值：表示 X 轴、Y 轴和 Z 轴；
4，2D位移：
1）translate(平移) 可取值：数值、百分比，也可以是负值
2）scale(缩放) 可取值：默认值为1，缩小：0 到 1 之间的数值，放大：大于 1 的数值；
3）rotate(旋转) 可取值：根据原点，将元素按照顺时针旋转给定的角度
允许负值，元素将逆时针旋转
4）skew(倾斜) 可取值；以原点位置，围绕 X 轴和 Y 轴，也可以按照一定的角度倾斜，可能会改变元素的形状
5，transform-style属性也是3D效果中经常使用的，
1）flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。
2）如果对一个元素设置了transform-style的值为flat，则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上，而不是它的前面或者后面。如果对一个元素设置了transform-style的值为preserve-3d，它表示不执行平展操作，他的所有子元素位于3D空间中。
transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素。
Demo：
HTML：
<div class="wrap">
<div class="spin">
<div class="rotate">
<img src="3d-distance.jpg" alt="" width="142" height="200" />
</div>
</div>
</div>
<div class="wrap">
<div class="spin">
<div class="rotate three-d">
<img src="3d_axes.png" alt="" width="142" height="200" />
</div>
</div>
</div>
CSS：
.wrap {
width: 500px;
height: 300px;
margin: 30px auto;
position: relative;
background: url(68.jpg) no-repeat center center;
background-size: 100% 100%;
}
.spin {
width: 142px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -72px;
margin-top: -101px;
border: 1px dashed orange;
cursor: pointer;
transform-style: preserve-3d;
}
.rotate {
background: url(images/cardKingClub.png) no-repeat center;
background-size: 100% 100%;
border: 5px solid hsla(50,50%,50%,.9);
transform: perspective(200px) rotateY(45deg);
}
.rotate img{
border: 1px solid green;
transform: rotateX(15deg) translateZ(10px);
transform-origin: 0 0 40px;
}
/*改变transform-style的默认值*/
.three-d {
transform-style: preserve-3d;
}
6，3D转换
1）perspective 属性（中文意思是：透视，视角）
perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。
2）特点：
a，为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身
b，只影响 3D 转换元素
注意点；默认是3D效果不明显？这是因为镜头离平面太远了，所以旋转效果不明显。试试perspective属性。设置perspect=400px。
3）3D 位移主要包含
translateZ(z)
translate3d(x,y,z)
解释：对于没有rotateX以及rotateY的元素，translateZ的功能就是让元素在自己的眼前或近或远（结合黑板上的图）；
4）3D 旋转主要包含
rotateX(deg)
rotateY(deg)
rotateZ(deg)
rotate3d(x,y,z,deg)
5）3D 缩放主要包含
scaleZ(z)
scale3d(x,y,z)
demo：
HTML：
<section id="darkblue" class="container">
<div class="box"></div>
</section>
CSS：
.container {
width: 200px;
height: 200px;
margin-bottom: 50px;
border: 1px solid gray;
}
.box {
width: 100%;
height: 100%;
opacity: .75;
}
#darkblue {
perspective: 600px;
}
#darkblue .box {
background-color: darkblue;
transform: translateZ(50px);
}
