3D转换

CSS3提供了3D转换是非常重要的概念，基于css来完成3D设计

css3提出的3D技术是2D的补充，在平面基础上，增加了z轴，构建了三维坐标系

三维坐标系

• 在x轴和y轴的基础上增加了z轴，构成了三维坐标系

• 在css的三维坐标系中，x轴的正方向是水平向右，y轴的正方向是垂直向下，z轴垂直屏幕向外

• 有了三维坐标系，就可以确定3D空间的任意位置，可以用（x,y,z）确定空间里任意一个位置

景深

• 在摄像中，景深是指相机对焦点前后相对清晰的成像范围，即镜头和物体之间距离。
• 在开发中我们将景深转化为当前物体在z轴上的显示距离。z轴上的0取值刚好在屏幕上
• 景深：近大远小
• 通过perspective设置盒子和屏幕之间距离，即景深；景深越大，物体（盒子）距离屏幕越远，效果越小；景深越小，盒子距离屏幕越近
• 一旦设置了景深，物体的运动会遵循近大远小的效果。
• 特点：
  • 景深给父盒子设置，子元素会以3d的形式展示，可以实现近大远小的效果
  • 景深值越大，3d效果越小，景深越小，3d效果越大
  • 景深是搭配3d转换一起使用的

perspective 设置景深（3D舞台）

给父盒子设置：perspective：200px；（也可称之为：搭建3d舞台） <style>.box{width: 500px;height: 300px;border: 1px solid red;margin: 100px auto;/* 设置景深 */perspective: 1000px;}.box div{width: 200px;height: 200px;background-color: pink;margin: 50px auto;transition: 10s;}.box div:hover{transform: rotateY(360deg);} </style> <div class="box"><div></div> </div>

3D转换

• 只有位移。缩放和旋转有效

旋转

• 先确定旋转轴，再确定旋转的角度

• 语法：

  指定x轴为旋转轴 tranform：rotateX（角度） y轴为旋转轴 transform：rotateY（角度） z轴为旋转轴 transfrom：rotateZ（角度） 旋转的函数：按照指定的轴进行旋转 transfrom：rotate3d（x,y,z,角度）;
  • x,y,z确定了页面中一个点，原点与这个点的连线就是旋转轴
  • x:表示是否有x轴旋转，值0~1
  • y:表示是否有y轴旋转，值0~1
  • z:表示是否有z轴旋转，值0~1

• 旋转轴：原点到指定的点的连线就是旋转轴，这个点分别垂直三个面对点。

位移

• 语法：

  transform:translateZ(z轴的移动量)； 复合属性： transfrom：translate3d（x,y,z） x,y,z分别代表x轴、y轴、z轴的移动量
  • z轴更改会影响物理距离屏幕的距离，会实现近大远小的效果；z轴为正值，伸出屏幕外，为负值，往屏幕里面移动。

缩放

• 语法：

  transform:scaleX(x); //x轴缩放的比例 transform:scaleY(y); //y轴缩放的比例 transform:scaleZ(z); //z轴缩放的比例 transfrom:scale3d(x,y,z) //x,y,z轴的缩放比例(通常搭配旋转复合属性使用可以观察到厚度的变化) .container:hover img{transition: 5s;/* 缩放 *//* transform: scaleY(2); */transform: scale3d(.5,1,2) rotateX(45deg);}
  • z轴进行缩放，控制的元素的厚度，一般看不到效果

perspective-origin灭点

• 设置视线的观察位置（灭点）（设置3d盒子的观察位置，默认是正对盒子）

• 灭点：在动画里面去找到视线的消失点

• 作用：让用户以不同的角度去查看3D盒子

• 语法

  perspective-origin:x轴 y轴；
  • 取值：px、百分比、方向单词（left 、right 、top、bottom、center）
  • 默认值：center center 元素的中心位置，看到的元素默认是对称

• 注意：这个属性设置在大盒子上（设置了景深的盒子）

transform-style（设置在父元素上）

• 作用：设置嵌套的元素在3D空间里呈现3D效果

• 取值：

  • flat：默认，代表所有的子元素在2d平面显示
  • preserve-3d：代表所有的子元素在3d空间里显示

• 语法:

  transform-style:flat | preserve-3d;

• 应用：结合景深来实现3D效果

练习

骰子

<style> *{margin: 0;padding: 0; } body{background-color: black; }.outer{/* 搭建3d舞台 */perspective: 500px; } .box{width: 200px;height: 200px;margin: 200px auto;position: relative; /* 设置子元素3D呈现形式 */transform-style: preserve-3d; transition: 5s;/* 设置转换基点 */transform-origin: 100px 100px -100px; }.box div{width: 200px;height: 200px;background-color:darkcyan;opacity: 0.5;font-size: 60px;text-align: center;line-height: 140px;position: absolute;top: 0;left: 0;border-radius: 20px; }.box div:nth-child(2){/* 设置基点 */transform-origin: right;/* 设置沿着Y轴旋转 */transform: rotateY(-90deg);background-color:darkcyan; }.box div:nth-child(3){/* 设置基点 */transform-origin: left top;/* 设置沿着Y轴旋转 */transform: rotateY(90deg);background-color:darkcyan; }.box div:nth-child(4){/* 设置基点 */transform-origin:left top;/* 设置沿着Y轴旋转 */transform: rotateX(-90deg);background-color:darkcyan; }.box div:nth-child(5){/* 设置基点 */transform-origin:left bottom;/* 设置沿着X轴旋转 */transform: rotateX(90deg);background-color:darkcyan; } .box:hover .item5{transform: rotateY(-90deg);} .box div:nth-child(6){/* Z轴位移 */transform: translateZ(-200px);background-color:darkcyan; }.box:hover{/* 设置旋转轴 */transform: rotate3d(1,1,1,720deg); }</style><!-- 搭建3D舞台 --><div class="outer"><!-- 旋转的3D盒子 --><div class="box"><div>.</div><div>..</div><div>...</div><div>....</div><div>.....</div><div>......</div></div></div>

电影立体翻转

<style>.container{width: 1100px;margin: 100px auto;border: 1px solid red;}.container .wrapper{perspective: 1500px;/* width: 310px;height: 100px; */margin: 16px 20px 32px 0px;float: left;}.container .wrapper .item{width: 310px;height: 100px;transform-style: preserve-3d;transition: 1.5s;position: relative;}.container .wrapper .item img{display: block;width: 310px;height: 100px;position: absolute;top: 0px;box-shadow: 0px 3px 8px rgba(0, 0, 0, .3);transform: translateZ(50px);}.container .wrapper .item .information{display: block;width: 290px;height: 80px;position: absolute;top: 0px;text-align: center;padding: 10px;word-wrap: break-word;background-color: rgb(236,241,241);transform: rotateX(-90deg) translateZ(50px);}.item:hover{transform: rotateX(90deg);} </style><!-- 存放6个盒子的空间 --> <div class="container clearfix"><div class="wrapper"><div class="item"><img src="img/1.jpg" alt=""><span class="information"><strong>澳门风雨</strong>闻名中外，曾担任美国赌场保安总顾问的魔术手石一坚，终回流澳门退休，更宴请各方朋友到来庆祝生日宴.</span></div></div><div class="wrapper"><div class="item"><img src="img/2.jpg" alt=""><span class="information"><strong>东成西就</strong>暴露年龄了</span></div></div><div class="wrapper"><div class="item"><img src="img/3.jpg" alt=""><span class="information"><strong>少林寺</strong>吴京年少作品</span></div></div> </div>

东成西就
暴露年龄了

少林寺
吴京年少作品

```

总结

以上是生活随笔为你收集整理的19-3D转换的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。