转换2D-3D

转换是css3中新增的一个特性。可以实现元素的位移，旋转，缩放，变形。

2D转换

1.缩放：scale

/* 第一种写法  n 表示缩放的倍数，n大于1表示放大，n小于1表示缩小。*/
transform:scale(n);
/* 第二种写法  x 表示水平方向上的缩放倍数，y表示垂直方向上的缩放倍数。*/
transform:scale(x,y);

2.位移：translate（重点）

/* 参数可以为px，百分比 */
transform:translate(水平位移，垂直位移);

说明：取值为正数，向下或向右移动。取值如果为负数，则向上或向左移动。

3.旋转：rotate

 /* 角度的单位为deg  正值为顺时针，负值为逆时针 */
transform:rotate(角度) 

4.倾斜：skew（了解）

/* 单位为deg 正值为顺时针，负值为逆时针  */
transform:skew(水平方向倾斜角度，垂直方向倾斜角度) 

5.注意事项

1. 转换操作不会影响其他元素的位置。

2. 只能添加给块元素，不能添加给行内元素。

3. 可以添加多个转换效果，会先执行前面的，再执行后面的。

3D转换

 左手法则（了解）：用左手握住旋转轴，大拇指朝向正方向。其他四个手指卷曲的方向就是旋转的正方向。

1.3D位移：translate（重点）

/* 横坐标位移 */
transform:translateX(n);
/* 纵坐标位移 */
transform:translateY(n);
/* Z轴位移 */
transform:translateZ(n);

2.3D旋转：rotate

/* 沿X轴旋转100deg */
transform:rotateX(100deg)
/* 沿Y轴旋转100deg */
transform:rotateY(100deg)
/* 沿Z轴旋100deg */
transform:rotateZ(100deg)

3.3D呈现

因为电脑屏幕是平面的，所以如果希望看到3D的过渡效果，需要给转换元素的父盒子添加以下属性

/* 设置父盒子为3D效果 */
transform-style: preserve-3d;
/* 设置视距 */
perspective: 500px;