CSS3中的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但是效果仅是变化后元素会突然平移，效果很差，这个特性一般应该没用。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> <style> .box { width: 850px; height: 220px; border: 1px solid; margin: 200px auto; } .box>div { float: left; width: 200px; height: 200px; margin-top: 10px; margin-left: 10px; background-color: #0f0; text-align: center; line-height: 200PX; } /* 旋转 参数是角度 */ .box>div:nth-child(1):hover { /* 未说明是哪条轴，默认X轴旋转 */ /* transform: rotate(45deg); */ /* 沿着X轴旋转 */ /* transform: rotateX(45deg); */ /* 沿着Y轴旋转 */ transform: rotateY(45deg); background-color: red; } /* 平移 */ .box>div:nth-child(2):hover { /* 如果只给一个参数 默认沿着x轴平移 */ /* transform: translate(100px); */ /* transform: translateX(-100px); */ /* transform: translateY(100px); */ /* 沿着z轴方向的平移距离 沿着y轴方向的平移距离 如果只想沿着y轴移动，参数1给0*/ transform: translate(100px, 100px); background-color: red; } /* 缩放 */ .box>div:nth-child(3):hover { /* 只传一个参数 表示宽高同时进行缩放 */ /* transform: scale(1.4); */ /* transform: scaleX(0.5); */ /* transform: scaleY(1.2); */ /* 串联个参数分别表示宽的缩放倍数和高的缩放倍数 */ transform: scale(0.2, 1.2); background-color: red; } /* 扭曲 */ .box>div:nth-child(4):hover { /* transform: skew(45deg); */ /* transform: skewX(45deg); */ transform: skewY(45deg); background-color: red; } </style> </head> <body> <div class="box"> <div class="top">旋转</div> <div class="center">平移</div> <div class="nav">缩放</div> <div class="bottom">扭曲</div> </div> </body> </html>
3D（3D坐标系相比2D坐标系多了一个Z轴，Z轴的正方向为垂直屏幕向外（朝向用户眼睛的方向）。）
transform-style：3d空间显示
perspective：3d视距，配合3D使用
backface-visibility：定义元素在不面对屏幕时是否可见。
透视(perspective)
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
- 透视原理： 近大远小 。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
rotate
rotateX() : 就是沿着 x 立体旋转.
rotateY()：沿着y轴进行旋转
rotateZ()：沿着z轴进行旋转
移动translate
translate3d(x,y,z)
[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>开门大吉</title> 8 <style> 9 section { 10 width: 450px; 11 height: 300px; 12 border: 1px solid #000; 13 margin: 100px auto; 14 background: url(images/3.jpg) no-repeat; 15 position: relative; 16 perspective: 1000px; /*给父盒子增加透视*/ 17 } 18 .door-left,.door-right { 19 position: absolute; 20 width: 50%; 21 height: 100%; 22 background-color: pink; 23 transition: all 1s; /*连个门都是过渡*/ 24 25 } 26 .door-left { 27 left: 0; 28 border-right: 1px solid #000; 29 transform-origin:left; /*旋转中心点*/ 30 } 31 .door-right { 32 right: 0; 33 border-left: 1px solid #000; 34 transform-origin:right; /*旋转中心点*/ 35 } 36 .door-left::after, 37 .door-right::after { 38 content: ""; 39 position: absolute; 40 top: 50%; 41 width: 10px; 42 height: 10px; 43 border: 1px solid #000; 44 border-radius: 50%; 45 transform: translateY(-50%); /*自己高度的一半*/ 46 } 47 .door-left::after { 48 right: 5px; 49 } 50 .door-right::after { 51 left: 5px; 52 } 53 /* 鼠标经过section，两个门进行翻转 */ 54 section:hover .door-right { 55 transform: rotateY(130deg); 56 } 57 section:hover .door-left { 58 transform: rotateY(-130deg); 59 } 60 61 62 </style> 63 </head> 64 <body> 65 <section> 66 <div class="door-left"></div> 67 <div class="door-right"></div> 68 </section> 69 </body> 70 </html>
backface-visibility
backface-visibility属性决定元素旋转背面是否可见。对于未旋转的元素，该元素的正面面向观看者。当其Y轴旋转约180度时会导致元素的背面面对观众。
backface-visibility属性使用语法：
backface-visibility: visible | hidden
该属性被设置为以下两个关键词之一：
visible：为backface-visibility的默认值，表示反面可见
hidden：表示反面不可见
一个元素的可见性与“backface-visibility:hidden”决定如下：
元素在3D环境下渲染上下文，将根据3D变形矩阵来计算，反之元素不在3D环境下渲染上下文，将根据2D变形矩阵来计算。
如果组件的矩阵在第3行、3列是负值，那么元素反面是隐藏，反之是可见的。
简单点来说，backface-visibility属性可用于隐藏内容的背面。默认情况下，背面可见，这意味着即使在翻转后，旋转的内容仍然可见。但当backface-visibility设置为hidden时，旋转后内容将隐藏，因为旋转后正面将不再可见。该功能可帮助您模拟多面的对象，例如下例中使用的纸牌。通过将backface-visibility设置为hidden，您可以轻松确保只有正面可见。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div { 8 width: 224px; 9 height: 224px; 10 margin: 100px auto; 11 position: relative; 12 /*transform-style: preserve-3d;*/ 13 /* 1.保留当前空间位置 14 2.是图片扁平化*/ 15 16 } 17 div img { 18 19 position: absolute; 20 top: 0; 21 left: 0; 22 transition: all 8s; 23 24 } 25 div img:first-child { 26 z-index: 1; 27 backface-visibility: hidden; /*不是正面对向屏幕，就隐藏*/ 28 } 29 div:hover img { 30 transform: rotateY(180deg); 31 } 32 </style> 33 </head> 34 <body> 35 <div> 36 <img src="images/qian.svg" alt=""/> 37 38 <img src="images/hou.svg" alt=""/> 39 </div> 40 </body> 41 </html>
