2D和3D
CSS3 transform 2D转换的属性与方法：
1.translate 平移
2.rotate 旋转
3.scale 缩放
4.skew 扭曲
还有一个属性就是transform-origin 从哪个方向改变被转换元素的位置
因为是css属性，所以必然，2d转化的设置在style中设置基本格式，transform：XXX；以选择哪种转化，还可以设置transition：time；以设置转化时间（不过不能设置在初始状态下，否则无效）
1.translate
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
2.rotate
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
rotate可以设置transform-origin可以设置旋转点的位置。
rotateX和rotateY有点意思，他们是关于x，y轴旋转。
3.sclae
transform：scale（a，b）将元素沿x，y方向放大a，b倍，transform：scale（a）与transform：scale（a，a）一致
4.skew
t通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）。我试着设置了一下transform-origin但是效果仅是变化后元素会突然平移，效果很差，这个特性一般应该没用。
代码：通过div从不同的角度进行以上四种方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 8 <title>Document</title> 9 10 <style> 11 .box { 12 width: 850px; 13 height: 220px; 14 border: 1px solid; 15 margin: 200px auto; 16 } 17 18 .box>div { 19 float: left; 20 width: 200px; 21 height: 200px; 22 margin-top: 10px; 23 margin-left: 10px; 24 background-color: #0f0; 25 text-align: center; 26 line-height: 200PX; 27 } 28 /* 旋转 参数是角度 */ 29 .box>div:nth-child(1):hover { 30 /* 未说明是哪条轴，默认X轴旋转 */ 31 /* transform: rotate(45deg); */ 32 /* 沿着X轴旋转 */ 33 /* transform: rotateX(45deg); */ 34 /* 沿着Y轴旋转 */ 35 transform: rotateY(45deg); 36 background-color: red; 37 } 38 /* 平移 */ 39 40 .box>div:nth-child(2):hover { 41 /* 如果只给一个参数 默认沿着x轴平移 */ 42 /* transform: translate(100px); */ 43 /* transform: translateX(-100px); */ 44 /* transform: translateY(100px); */ 45 /* 沿着z轴方向的平移距离 沿着y轴方向的平移距离 如果只想沿着y轴移动，参数1给0*/ 46 transform: translate(100px, 100px); 47 background-color: red; 48 } 49 /* 缩放 */ 50 51 .box>div:nth-child(3):hover { 52 /* 只传一个参数 表示宽高同时进行缩放 */ 53 /* transform: scale(1.4); */ 54 /* transform: scaleX(0.5); */ 55 /* transform: scaleY(1.2); */ 56 /* 串联个参数分别表示宽的缩放倍数和高的缩放倍数 */ 57 transform: scale(0.2, 1.2); 58 background-color: red; 59 } 60 /* 扭曲 */ 61 62 .box>div:nth-child(4):hover { 63 /* transform: skew(45deg); */ 64 /* transform: skewX(45deg); */ 65 transform: skewY(45deg); 66 background-color: red; 67 } 68 </style> 69 </head> 70 71 <body> 72 <div class="box"> 73 <div class="top">旋转</div> 74 <div class="center">平移</div> 75 <div class="nav">缩放</div> 76 <div class="bottom">扭曲</div> 77 </div> 78 </body> 79 80 </html>
3D（3D坐标系相比2D坐标系多了一个Z轴，Z轴的正方向为垂直屏幕向外（朝向用户眼睛的方向）。）
transform-style：3d空间显示
perspective：3d视距，配合3D使用
backface-visibility：定义元素在不面对屏幕时是否可见。
透视(perspective)，类似摄像头，通常它的视距是800px
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
- 透视原理： 近大远小 。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
rotate
rotateX() : 就是沿着 x 立体旋转.
rotateY()：沿着y轴进行旋转
rotateZ()：沿着z轴进行旋转
移动translate
translate3d(x,y,z)
[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
卡牌翻转
//1、首先我们创建了一个“灯光”persepctive用来产生3D变化的效果的 //2、然后我们创建了一个“舞台” transform-style: preserve-3d //3、创建“演员”，这里的演员指的是每张的图片，在创建的时候要根据你最终要呈现的形态进行建模，也即是平移旋转之类的操作 css html,body{ background:#ff9f96; } .zf{ width: 300px; height: 300px; margin:200px auto; perspective:800px; } .bigbox{ width:300px; height:300px; position:relative; transform-style:preserve-3d;/*把bigbox变为3D空间*/ transition:transform 1s; } .xiaobox1{ backface-visibility:hidden;/*这行代码是xiaobox1设置为背面隐藏*/ width:300px; height:300px; position:absolute; background:url(../img/dome061.jpg); background-size:650px 300px; transform:rotateY(180deg);/*让xiaobox1原地旋转180度*/ } .xiaobox2{ backface-visibility:hidden; width:300px; height:300px; position:absolute; background:url(../img/dome062.jpg); background-size:650px 300px; } //正反两面都要进行翻转，所以hover效果要放在整体的盒子上 .bigbox:hover{ transform:rotateY(180deg);/*鼠标移到bigbox上他原地旋转180度*/ } <div class="zf"> <div class="bigbox"> <div class="xiaobox1"></div> <div class="xiaobox2"></div> </div> </div>
