在css3中允许使用3d转换来对元素进行格式化，在原本只是2d转化的平面中引入了z轴。在这之前我们讲解了css3中的2d转换，也就是二维空间变换，本篇的3d转换就是基于原来的2d转换而来，与2d转换的功能相似。
相信学过数学的效果版对这一概念多多少少是知道的，我们要想有一个3d空间效果，也就是立体空间感，比如：正方体、长方体…..再比如我们生活所居住的房间也是3d立体空间的，主要有x轴、y轴z轴共同组成
x轴 ： 水平向右，x右边是正值，左边是负值。
y轴 ： 垂直向下，y下面是正值，上面是负值。
z轴 ： 垂直屏幕，往外面是正值，往里面是负值。
这里transform属性和transform-origin属性在前一篇《》中已经讲解了，这里就不再细说。不同的是在3d转换中，transform-origin属性会接收第三个值，表示z轴方向位置
（1）transform-style
transform-style设置元素的子元素是位于 3d 空间中还是平面中。
语法：
div{ transform-style: flat|prerve-3d;}flat：设置元素的子元素位于该元素的平面中（子元素不设置3d空间）
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <style> .box{ position: relative; width: 200px; height: 200px; margin: 100px auto; transition: .5s; 季羡林的文章 /* flat:子元素不存在3d空间 */ transform-style: flat; background-color: #eee; } .box:hover{ transform: rotatey(60deg); } .s{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: pink; } .s2{ background-color: orange; transform: rotatex(45deg); } </style></head><body> <div class="box"> <div class="s s1"></div> <div class="s s2"></div> </div></body></html>设置flat值，子元素就只位于平面中，效果如下：
prerve-3d：设置元素的子元素应用于3d空间中
基于上述栗子，将transform-style属性值改为prerve-3d：
.box{ /* 让子元素保持3d立体空间环境 */ transform-style: prerve-3d;}得到3d空间效果：
3d视觉是不是感觉一下就来啦~
（2）perspective
perspective指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。如果不指定透视，则z轴空间中的所有点将平铺到同一个2d视平面中，并且变换结果中将不存在景深概念
z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定
“perspective”本身就具有透视的意思，就是设置用于户和元素3d空间z平面之间的距离（视距），简单理解就是将电脑屏幕当做一个平面，用户眼睛到屏幕的垂直方向。值越大用户与屏幕距离越远，视觉效果很小，值越小3d效果就越明显。
语法：
div{ perspective：none | <length>}none：默认值，与 0 相同，不设置透视length：元素距离视图的距离，以像素计这里还是以上述栗子进行演示：
body{ perspective: 900px;} 或者
.box{ perspective: 900px;}只要设置在父盒子上就可以，效果如下：
从第一眼就可以看出与上面不同，没有设置景深是这样：
设置了景深是这样的：
注意：perspective属性只影响 3d 转换元素，并且同时使用perspective-origin属性，可以改变 3d 元素的底部位置
（3）perspective-orgin
perspective-origin 属性定义 3d 元素所基于的 x 轴和 y 轴。该属性允许矜的意思您改变 3d 元素的底部位置。
语法：
perspective-origin: x-axis y-axis;
x-position：指定消失点的横坐标，其值有以下形式：
<length-percentage>长度值或相对于元素宽度的百分比值，可为负值。
left, 关键字，0值的简记。center, 关键字，50%的简记。right, 关键字，100%的简记。y-position：指定消失点的纵坐标，其值有以下形式：
<length-percentage>长度值或相对于元素高度的百分比值，可为负值。top, 关键字，0值的简记。center, 关键字，50%的简记。bottom, 关键字，100%的简记介绍完语法使用，我们知道了怎么取值，下面还是基于上述例子继续演示：
值为长度值：
.box{ perspective-origin: 300px;}效果如下：
值为关键字：
.box{ perspective: 900px; perspective-origin: left;}效果如下：
值为百分比：
.box{ perspective: 900px; perspective-origin: 300%;}效果如下：
两个值：
.box{ perspective: 900px; perspective-origin: left top;}效果如下：
（4）backface-visibility
backface-visibility指定当元素背面朝向观察者时是否可见
元素的背面是其正面的镜像，虽然在 2d 中不可见，但是当变换导致元素在 3d 空间中旋转时，背面可以变得可见。 （此属性对 2d 变换没有影响，它没有透视。）
语法：
backface-visibility: visible|hidden;visible：默认值。 背面是可见的。hidden：背面是不可见的
这里借鉴了mdn上面的例子：
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <style> .showbf div { backface-visibility: visible; } .hidebf div { backface-visibility: hidden; } .container { width: 150px; height: 150px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; perspective: 550px; perspective-origin: 150% 150%; transform-style: prerve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-rif; font-size: 60px; color: white; text-align: center; } .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform:计算机二级难吗 rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } th, p, td { background-color: #eeeeee; margin: 0px; padding: 6px; font-family: sans-rif; text-align: left; } </style></head><body> <table> <tr> <th><code>backface-visibility: visible;</code></th> <th><code>backface-visibility: hidden;</code></th> </tr> <tr> <td> <div class="container"> <div class="cube showbf"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> <p> since all faces are partially transparent, the back faces (2, 4, 5) are visible through the front faces (1, 3, 6). </p> </td> <td> <div class="container"> <div class="cube hidebf"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bott绝情的人om">6</div> </div> </div> <p> the three back faces (2, 4, 5) are hidden. </p> </td> </tr> </table></body></html>旋转单位：deg(角度)、rad(弧度)、grad(梯度)、turn(圈)
弧度 = 角度*π/180grad = 360度(一圈)（1）3d位移
3d位移在2d基础上多加了一个可以z轴移动的方向
3d位移主要演示translatez和translate3d两个属性：
translate3d()css 函数在3d空间内移动一个元素的位置，这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离
<!doctype html><html lang="en"><am怎么读head> <meta chart="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>3d位移</title> <style>body{ perspective: 800px;} .box{ position: relative; width: 200px; height: 200px; margin: 100px auto; transition: .5s; background-color: pink; text-align: center; line-height: 200px;}.box:hover{ /* transform: translatex(50px) translatey(100px) translatez(200px); */ /* 简写 */ transform: translate3d(50px,100px,200px);} </style></head><body> <div class="box">3d位移</div></body></html>效果如下：
注意：
首先要设置perspectiv属性在被观察元素的父盒子上，不然不会有z轴效果。如果只是单独设置z轴视距，可以直接使用translatez属性。z轴设置的值越大，距离我们眼睛就越近，也就是简单理解元素被放大了z轴设置的值越小，或者为负数，则会离我们眼睛越远，元素缩小（2）3d旋转
rotatex：让元素围绕x轴转rotatey：让元素围绕y轴旋转rotatez：让元素围绕z轴旋转rotate3d：让元素围绕固定轴旋转不变形
旋转量由角度决定，角度为正则顺时针旋转，反之逆时针旋转
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>3d旋转</title> <style>body{ perspective: 800px;} .box{ position: relative; width: 200px; height: 200px; margin: 100px auto; transition: .5s; background-color: pink; text-align: center; line-height: 200px;}.box:hover{ transform: rotatex(180deg); /* x轴旋转180° */ transform: rotatey(180deg); /* y轴旋转180° */ transform: rotatez(180deg); /* z轴旋转180° */} </style></head><body> <div class="box">3d旋转</div></body></html>x轴旋转效果：
y轴旋转效果：
z轴旋转效果：
这里单独将rotate3d函数拎出来讲
语法：
rotate3d(x, y, z, a)
取值分析：
x：可以是0到1之间的数值，表示旋转轴x坐标方向的矢量y：可以是0到1之间的数值，表示旋转轴y坐标方向的矢量z：可以是0到1之间的数值，表示旋转轴z坐标方向的矢量a：表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转也就是说rotatex(a) === rotate3d(1,0,0,a)、rotatey(a) === rotate3d(0,1,0,a)、rotatez(a) === rotate3d(0,0,1,a)
.box:hover{ transform: rotate3d(1,1,0,50deg); /* 表示在x轴和y轴旋转50° */}效果如下：
.box:hover{ transform: rotate3d(1,1,1,1turn); /* 围绕3轴旋转一圈 */}效果如下：
基于上述所学内容，我们来实操做一个3d盒子旋转：
html结构：
<!doctype html><html lang="zh-cn"> <head> <meta chart="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>3d盒子旋转</title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <ction> <div><img src="images/1.jpg" alt="" /></div> <div><img src="images/2.jpg" alt="" /></div> <div><img src="images/3.jpg" alt="" /></div> <div><img src="images/4.jpg" alt="" /></div> <div><img src="images/5.jpg" alt="" /></div> <div><img src="images/6.jpg" alt="" /></div> <div><img src="images/1.jpg" alt="" /></div> <div><img src="images/2.jpg" alt="" /></div> <div><img src="images/3.jpg" alt="" /></div> <div><img src="images/4.jpg" alt="" /></div> <div><img src="images/5.jpg" alt="" /></div> <div><img src="images/6.jpg" alt="" /></div> </ction> </body></html>
css部分：
* { /* 初始化 */ padding: 0; margin: 0;}body { /* 弹性布局*/ display: flex; justify-content: center; align-items: center; height: 100vh; /* 视距 */ perspective: 1000px;}ction { position: relative; width: 150px; height: 150px; /* 让子元素保留其3d位置 */ transform-style: prerve-3d; /* 动画 名称 时长 linear 是匀速运动 infinite是无限次播放 */ animation: rotate 5s linear infinite;}ction div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; transition: all 1s;}ction div img { width: 100%; height: 100%;}/* 这里使用的伪类选择器 */ction div:nth-child(1) { /* 选择第1个元素 */ transform: translatez(75px);}ction:hover div:nth-child(1) { transform: translatez(200px);}ction div:nth-child(2) { /* 选择第2个元素 */ transform: rotatex(-180deg) translatez(75px);}ction:hover div:nth-child(2) { transform: rotatex(-180deg) translatez(200px);}ction div:nth-child(3) { /* 选择第3个元素 */ transform: rotatex(90deg) translatez(75px);}ction:hover div:nth-child(3) { transform: rotatex(90deg) translatez(200px);}ction div:nth-child(4) { /* 选择第4个元素 */ transform: rotatex(-90deg) translatez(75px);}ction:hover div:nth-child(4) { transform: rotatex(-90deg) translatez(200px);}ction div:nth-child(5) { /* 选择第5个元素 */ transform: rotatey(90deg) translatez(75px);}ction:hover div:nth-child(5) { transform: rotatey(90deg) translatez(200px);}ction div:nth-child(6) { /* 选择第6个元素 */ transform: rotatey(-90deg) translatez(75px);}ction:hover div:nth-child(6) { transform: rotatey(-90deg) translatez(200px);}ction div:nth-child(7) { /* 选择第7个元素 */ transform: translatez(75px);}ction div:nth-child(8) { /* 选择第8个元素 */ transform: rotatex(-180deg) translatez(75px);}ction div:nth-child(9) { /* 选择第9个元素 */ transform: rotatex(90deg) translatez(75px);}ction div:nth-child(10) { /* 选择第10个元素 */ transform: rotatex(-90deg) translatez(75px);}ction div:nth-child(11) { /* 选择第11个元素 */ transform: rotatey(90deg) translatez(75px);}ction div:nth-child(12) { /* 选择第12个元素 */ transform: rotatey(-90deg) translatez(75px);}/* 定义动画 */@keyframes rotate { 0% { transform: rotatey(0) rotatex(0); } 100% { transform: rotatey(360deg) rotatex(360deg); }}效果如下
到此这篇关于css3带你实现3d转换效果的文章就介绍到这了,更多相关css3 3d转换内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！
本文发布于:2023-04-07 21:23:42，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/032e3725517e31bc3406dc76af0bf0b7.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：css3带你实现3D转换效果.doc
本文 PDF 下载地址：css3带你实现3D转换效果.pdf
| 留言与评论（共有 0 条评论） |
