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转换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。