转换，2D,3D

一，转换定义：

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);

}