目录
19 3D变换
1 浏览器中的坐标系
2 基本API
2.1 景深
2.2 灭点
2.3 景深基点
2.4 3D旋转
2.5 3D平移
2.6 3D缩放
2.7 transform-style
2.8 backface-visibility
3 案例效果
3.1 立方体
在浏览器中，X轴是从左到右，Y轴是从上到下，Z轴是从里到外
作用
让3D场景有近大远小的效果。 是一个不可继承属性，但它可以作用于后代元素（不是作用于本身的）语法一
transform: perspective(depth); depth的默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。1000px被认为是个正常值注意：若使用perspective()函数，那么他必须被放置在transform属性的首位，如果放在其他函数之后，则会被忽略,该方法一般不适用
示例
<head> <meta charset="UTF-8"> <title>景深</title> <style> .warp{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 400px; height: 400px; border: 1px solid #000; overflow: hidden; } .inner{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 50% 50% ; font: 40px/200px "微软雅黑"; text-align: center; width: 200px; height: 200px; background-color: #bbAAFF; transition: 2s; transform: perspective(100px) rotateX(0deg); } .warp:hover .inner{ transform: perspective(100px) rotateX(360deg); } </style> </head> <body> <div class="warp"> <div class="inner">Hello</div> </div> </body>
效果
语法二
perspective: depth; 同perspective()函数一样，depth的默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。 他们唯一的区别是，perspective属性是被用于元素的后代元素，而不是元素本身； 就是说，为某个元素设置perspective属性后，是对这个元素的子元素起作用，而不是这个元素本身。注意：为某个元素设置perspective属性后，是对这个元素的子元素起作用，而不是这个元素本身。也不是所有的后代元素。只有子元素有效。
示例
<head> <meta charset="UTF-8"> <title>景深</title> <style> .warp{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 400px; height: 400px; border: 1px solid #000; overflow: hidden; perspective: 100px; } .inner{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 50% 50% ; font: 40px/200px "微软雅黑"; text-align: center; width: 200px; height: 200px; background-color: #bbAAFF; transition: 2s; } .warp:hover .inner{ transform: rotateX(360deg); } </style> </head> <body> <div class="warp"> <div class="inner">Hello</div> </div> </body>效果
指的是立体图形各条边的延伸线所产生的相交点。透视点的消失点
特点
景深越大 灭点越远 元素变形越小 景深越小 灭点越近 元素变形越大示例
<head> <meta charset="UTF-8"> <title>灭点</title> <style> .warp { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 400px; height: 200px; border: 1px solid #000; overflow: hidden; perspective: 100px; } .box1 { position: absolute; left: 50px; bottom: 0; width: 100px; height: 100px; perspective: 100px; } .box2 { position: absolute; right: 50px; bottom: 0; width: 100px; height: 100px; perspective: 400px; } .inner{ width: 100%; height: 100%; font: 40px/100px "微软雅黑"; text-align: center; background-color: #bbAAFF; transform: rotateX(45deg); } </style> </head> <body> <div class="warp"> <div class="box1"> <div class="inner">box1</div> </div> <div class="box2"> <div class="inner">box2</div> </div> </div> </body>效果
作用
控制视角的位置语法
perspective-origin:X轴值,Y轴值; 可选值： X轴值:（1）任意px值（2）left/center/right Y轴值:（1）任意px值（2）top/center/bottom注意:同perspective属性，也是设置在父元素上，对后代元素起作用。 这个属性来设置你在X, Y轴坐标确定的那个点来看这个元素，Z轴是被perspective属性设置
示例
<head> <meta charset="UTF-8"> <title>景深基点</title> <style> .warp { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 400px; height: 200px; border: 1px solid #000; overflow: hidden; perspective: 100px; } .box1 { position: absolute; left: 50px; bottom: 0; width: 100px; height: 100px; perspective: 100px; perspective-origin: left top; } .box2 { position: absolute; right: 50px; bottom: 0; width: 100px; height: 100px; perspective: 400px; perspective-origin: right bottom; } .inner{ width: 100%; height: 100%; font: 40px/100px "微软雅黑"; text-align: center; background-color: #bbAAFF; transform: rotateX(45deg); } </style> </head> <body> <div class="warp"> <div class="box1"> <div class="inner">box1</div> </div> <div class="box2"> <div class="inner">box2</div> </div> </div> </body>
效果
语法
transform: rotateX(angle) transform: rotateY(angle) transform: rotateZ(angle) transform:rotate3d(x,y,z,angle) x, y, z分别接受一个数值(number),用来计算矢量方向(direction vector)， 矢量方向是三维空间中的一条线, 从坐标系原点到x, y, z值确定的那个点， 元素围绕这条线旋转angle指定的值示例
<head> <meta charset="UTF-8"> <title>3D旋转</title> <style> .warp{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 300px; height: 300px; border: 1px solid #000; overflow: hidden; perspective: 100px; } .inner{ position: relative; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 50% 50% ; font: 20px/100px "微软雅黑"; text-align: center; width: 100px; height: 100px; background-color: #bbAAFF; transition: 2s; } .warp:hover .inner:nth-child(1){ transform: rotateX(360deg); } .warp:hover .inner:nth-child(2){ transform: rotateY(360deg); } .warp:hover .inner:nth-child(3){ transform: rotateZ(360deg); } </style> </head> <body> <div class="warp"> <div class="inner">rotateX</div> <div class="inner">rotateY</div> <div class="inner">rotateZ</div> </div> </body>效果
语法
transform: translateZ(length)是3D Transformaton特有的，其他两个2D中就有 translateZ 它不能是百分比 值; 那样的移动是没有意义的。 transform: translate3d(translateX,translateY,translateZ); translateZ 它不能是百分比 值; 那样的移动是没有意义的。注意：Z轴的平移不能是百分数。
示例
<head> <meta charset="UTF-8"> <title>3D平移</title> <style> .warp{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 400px; height: 400px; border: 1px solid #000; overflow: hidden; perspective: 100px; } .inner{ position: relative; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 50% 50% ; font: 20px/100px "微软雅黑"; text-align: center; width: 100px; height: 100px; background-color: #bbAAFF; transition: 2s; } .warp:hover .inner:nth-child(1){ transform: translateX(100%); } .warp:hover .inner:nth-child(2){ transform: translateY(200px); } .warp:hover .inner:nth-child(3){ transform: translateZ(100px); } </style> </head> <body> <div class="warp"> <div class="inner">rotateX</div> <div class="inner">rotateY</div> <div class="inner">rotateZ</div> </div> </body>效果
语法
transform: scaleZ(number) transform: scale3d(scaleX,scaleY,scaleZ); 如果只设置scaleZ(number)，你会发现元素并没有被扩大或压缩， scaleZ(number)需要和translateZ(length)配合使用， number乘以length得到的值，是元素沿Z轴移动的距离，从而使得感觉被扩大或压缩示例
<head> <meta charset="UTF-8"> <title>3D缩放</title> <style> .warp{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 400px; height: 400px; border: 1px solid #000; overflow: hidden; perspective:300px; } .inner{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 50% 50% ; font: 20px/200px "微软雅黑"; text-align: center; width: 200px; height: 200px; background-color: #bbAAFF; transition: 2s; } .warp:hover .inner{ transform: translateZ(50px) scaleZ(2); /*该方法相先平移50px 然后放大2倍（无意义）实际上只是平移50px*/ transform: scaleZ(2) translateZ(50px); /*该方法相当于translateZ(100px)*/ } </style> </head> <body> <div class="warp"> <div class="inner">rotateX</div> </div> </body>效果
作用
用于营造有层级的3D舞台语法
transform-style:flat/preserve-3d; 这个属性指定了子元素如何在空间中展示，只有两个属性值：flat（默认）和preserve-3d flat 表示所有子元素在2D平面呈现， preserve-3d 表示所有子元素在3D平面呈现注意：该属性是一个不可继承属性，且作用于子元素。
示例
<head> <meta charset="UTF-8"> <title>transform-style</title> <style> .warp{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 400px; height: 400px; border: 1px solid #000; perspective: 300px; transform-style: preserve-3d; background-color: gray; } .inner{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 50% 50% ; font: 40px/200px "微软雅黑"; text-align: center; width: 200px; height: 200px; background-color: #bbAAFF; transform: rotateX(0deg) translateZ(100px); transition: 2s; } .warp:hover .inner{ transform: rotateX(360deg) translateZ(100px); } </style> </head> <body> <div class="warp"> <div class="inner">Hello</div> </div> </body>效果
backface-visibility属性用来设置，是否显示元素的背面，默认是显示的。
语法
backface-visibility: keyword; keyword有两个值，hidden和visible，默认值是visible。示例
<head> <meta charset="UTF-8"> <title>backface-visibility</title> <style> .warp { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 400px; height: 400px; border: 1px solid #000; perspective: 300px; } .box1 { position: absolute; left: 0; top: 50%; font: 40px/100px "微软雅黑"; text-align: center; width: 200px; height: 200px; transition: 2s; transform-style: preserve-3d; transform-origin: 100px 100px -50px; } .box2 { position: absolute; right: 0; top: 50%; font: 20px/100px "微软雅黑"; text-align: center; width: 200px; height: 200px; transition: 2s; transform-style: preserve-3d; } .inner { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; font: 20px/100px "微软雅黑"; text-align: center; width: 100px; height: 100px; background-color: rgba(187,170,255,0.3); } .box1 .inner:nth-child(1){ transform: rotateX(180deg); transform-origin: center center -50px; /* 设置变形基点 等价于transform-origin: 50px 50px -50px; 中心点等于该元素width/height的一半*/ } .box2 .inner:nth-child(1){ transform: rotateX(180deg); transform-origin: center center -50px; } .box2 .inner{ backface-visibility: hidden; } .warp:hover .box1{ transform: rotateX(180deg); } .warp:hover .box2{ transform: rotateX(180deg); } </style>效果
示例
<head> <meta charset="UTF-8"> <title>立方体</title> <style> .warp{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 400px; height: 400px; border: 1px solid #CCC; /* 视觉基点 作用于动画的父级元素*/ /*景深只作用于子元素*/ perspective: 800px; /*景深基点作用于后代元素*/ perspective-origin: -50px 0px; } .box{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 200px; height: 200px; /*只作用于子元素*/ transform-style: preserve-3d; transition: 2s; /*动画旋转基点 该属性只作用于本身 不可继承*/ transform-origin: center center -100px; } .surface{ position: absolute; background-color: rgba(187,170,255,.3); width: 100%; height: 100%; font: 20px/200px "微软雅黑"; text-align: center; /*是否显示元素背后元素，作用于元素本身*/ backface-visibility: hidden; /* 面旋转基点*/ transform-origin: center center -100px; } .box .surface:nth-child(1){ transform: rotateX(90deg); } .box .surface:nth-child(2){ transform: rotateX(270deg); } .box .surface:nth-child(3){ transform: rotateY(270deg); } .box .surface:nth-child(4){ transform: rotateY(90deg); } .box .surface:nth-child(5){ z-index: 1; } .box .surface:nth-child(6){ transform: rotateY(180deg); } .warp:hover .box{ transform: rotateY(360deg); } </style> </head> <body> <div class="warp"> <div class="box"> <div class="surface">上</div> <div class="surface">下</div> <div class="surface">左</div> <div class="surface">右</div> <div class="surface">前</div> <div class="surface">后</div> </div> </div> </body>效果
