CSS3 3D的总结（初学者易懂）
生活随笔
收集整理的這篇文章主要介紹了
CSS3 3D的总结（初学者易懂）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS3 3D案例的總結
如果要說是3D的基礎概念，首先我就來說一說rotateX()、rotateY()、rotateZ()這幾個屬性
rotateX():對應的是3D模型中的X軸上的旋轉，傳入的參數如:rotateX(45deg)表示的是頁面繞X軸順時針旋轉45度
rotateY():對應的是3D模型中的Y軸上的旋轉，傳入的參數如:rotateY(45deg)表示的是頁面繞Y軸順時針旋轉45度
rotateZ():對應的是3D模型中的Z軸上的旋轉，傳入的參數如:rotateZ(45deg)表示的是頁面繞Z軸順時針旋轉45度(必須提到的是Z軸是相對自己的正面)
請看下圖:
這就是對3D的基礎，明白這三點做起來會很簡單。
perspective
根據我個人對這個屬性的理解，這個屬性的功能就有點像把平行光設置為聚焦光一樣，我們可以知道這個屬性相當于將默認的平行光置換成焦點光，如果是像perspective:500px，這個我們可以認為是光源離物體的距離是500px，這個數值如果是越大的話，那么等一下的物體呈現就會越小，反之越大。
下面給大家呈現幾個示例。
1.反轉
效果展示:
HTML:
<body><div id="cont"><div id="box"></div><div id="box1"><img src="images/lunbo2.jpg"></div></div> </body>css:
body{background: rgb(88, 71, 71);transform-style: preserve-3d;perspective: 800px; } /*添加3D效果和視距*/ #cont{width: 300px;height: 300px;transform-style: preserve-3d;margin: 100px auto;transform: rotateY(0deg);transition: all 2s; } /*設置3D，讓他在2秒內執行完*/ #cont:hover{transform: rotateY(180deg); } /*設置hover時間*/ #box{width: 300px;height: 300px;line-height: 300px;background: url(../images/lunbo3.jpg)no-repeat;background-size:100% 100%;margin: 0 auto;font-size: 150px;text-align: center;color: #fff;position: absolute;backface-visibility: hidden; } /*這個是正面*/ #box1{width: 300px;line-height: 300px;transform: rotateY(-180deg); } /*這個是反面*/ #box1 img{width: 100%;height: 300px; }這就是旋轉，是沿著Y軸旋轉了180度。接下來就結合一下上面所提到的一個坐標軸的相對位置問題來接一個例子。
2.正方體
效果展示:
HTML:
<body><div id="box"><div id="cont"class="cont"><div class="mian"><img src="images/tp.jpg"></div><div class="mian"><img src="images/tp2.jpg"></div><div class="mian"><img src="images/tp3.jpg"></div><div class="mian"><img src="images/tp4.jpg"></div><div class="mian"><img src="images/tp5.jpg"></div><div class="mian"><img src="images/tp6.jpg"></div></div></div> </body>CSS:
body{background: rgb(125, 102, 119); } #box{transform-style: preserve-3d;perspective: 800px; } /*添加3D效果和視距*/ .cont{width: 200px;height: 200px;margin: 150px auto;position: relative;transform-style: preserve-3d;/*添加3D*/transform: rotateX(10deg) rotateY(10deg);animation:ziz 10s infinite;/*綁定事件，讓他在10秒內執行完*/ } @keyframes ziz{0%{transform:rotate(0deg);}50%{transform:rotateX(180deg);}70%{transform: rotateY(180deg);}100%{transform:rotateX(0deg);} } /*事件*/ .cont img{width: 200px;height: 200px; } .mian{width: 200px;height: 200px;position: absolute; } /*下面設置的6個面，讓它們以不同的角度選擇拼接*/ .mian:nth-child(1){background: blue;transform: rotateX(90deg) translateZ(100px); } .mian:nth-child(2){background: rgb(32, 193, 40);transform: rotateX(-90deg) translateZ(100px); } .mian:nth-child(3){background: red;transform: rotateY(-90deg) translateZ(100px); } .mian:nth-child(4){background: yellow;transform: rotateY(90deg) translateZ(100px); } .mian:nth-child(5){background: #3ce8af;transform:translateZ(100px); } .mian:nth-child(6){background: #e476a3;transform:translateZ(-100px) rotateY(180deg); }首先我給它們都設置了 3D 空間，perspective這個是所謂的視距，接下來我給正方形 設置了6個面，各讓它們沿著 rotateX rotateY translateZ 進行調整，然后組成一個現在所看到的3D 正方體。
3.旋轉
效果展示:
HTML:
<body><div class="cont" id="xj"><div class="box" id="box"><div class="mian"><img src="images/lunbo1.jpg"></div><div class="mian"><img src="images/lunbo2.jpg"></div><div class="mian"><img src="images/lunbo3.jpg"></div><div class="mian"><img src="images/lunbo1.jpg"></div><div class="mian"><img src="images/lunbo2.jpg"></div><div class="mian"><img src="images/lunbo3.jpg"></div><div class="mian"><img src="images/lunbo4.jpg"></div><div class="mian"><img src="images/lunbo3.jpg"></div><div class="mian"><img src="images/lunbo2.jpg"></div></div></div> </body>CSS:
body{background: rgb(123, 235, 238); } .cont{transform-style: preserve-3d;perspective: 800px; } /*添加3D和視距*/ .box{width: 200px;height: 200px;margin: 100px auto;position: relative;transform-style: preserve-3d;/*添加3D*/transform: rotateX(-10deg) rotateY(0deg) translateZ(-300px);transform-origin: center center -300px; /*設置眼睛的位置*/line-height: 200px;transition:all 1s;/*在1秒內執行完*/ } .box img{width: 100%;height: 100%; } .mian{width:200px;height: 200px;position: absolute;background-color: black;font-size: 100px;color: #fff;text-align: center;} /*下面是9個div讓它們rotateY的角度拼接成一個多邊形*/ .mian:nth-child(1){transform: rotateY(0deg) translateZ(275px); } .mian:nth-child(2){transform: rotateY(40deg) translateZ(275px); } .mian:nth-child(3){transform: rotateY(80deg) translateZ(275px); } .mian:nth-child(4){transform: rotateY(120deg) translateZ(275px); } .mian:nth-child(5){transform: rotateY(160deg) translateZ(275px); } .mian:nth-child(6){transform: rotateY(200deg) translateZ(275px); } .mian:nth-child(7){transform: rotateY(240deg) translateZ(275px); } .mian:nth-child(8){transform: rotateY(280deg) translateZ(275px); } .mian:nth-child(9){transform: rotateY(320deg) translateZ(275px); }這個是根據上面的排版一樣也是調整了他們的 rotateX rotateY translateZ 。然后加入了JS里面的鼠標點擊事件，讓它們沿著X軸旋轉。
4.卡片翻閱
效果展示：
HTML:
<body><div id="box"><div id="box1"><div class="hz"><img src="images/tp.jpg"></div><div class="hz"><img src="images/tp2.jpg"></div><div class="hz"><img src="images/tp3.jpg"></div><div class="hz"><img src="images/tp4.jpg"></div><div class="hz"><img src="images/tp6.jpg"></div><div class="hz"><img src="images/tp5.jpg"></div></div></div><div class="btn"><input type="button" value="下" id="btn"><input type="button" value="上" id="up"></div> </body>CSS:
body{background: rgb(197, 231, 143); } #box{transform-style: preserve-3d;perspective: 800px; } /*添加3D和視距*/ #box1{width: 300px;height: 300px;margin: 100px auto;position: relative;text-align: center;line-height: 300px;font: 150px/2 Microsot Yahei;color: #fff;transform-style: preserve-3d;/*添加3D*/ } #box1 img{width: 100%;height: 100%; } .hz{width: 100%;height: 100%;background: red;position: absolute;transform-origin: bottom;/*設置的眼睛在下面*/transform: rotateX(0deg);transition: all 2s;/*設置時間*/backface-visibility: hidden;/*隱藏背面*/ }首先讓它rotateX(-90deg)以后，貌似是隱藏了，實際上是和人的視覺平行了，比方說一個很扁的物品，當和人的視覺平行以后，很難看到存在的東西。
5.魔方
效果展示：
HTML:
<body><div id="box"></div> </body> var box=document.getElementById('box'); var geshu=6;//渲染的個數 var xr='<div class="box1"><div class="mian"></div><div class="mian"></div><div class="mian"></div><div class="mian"></div><div class="mian"></div><div class="mian"></div></div>'; var str=''; for (var i = 0; i < geshu; i++) {str+=xr; } box.innerHTML=str; //渲染完畢 var wutai=box.getElementsByClassName('box1'); console.log(wutai); var cishu=0; box.onclick=function() {cishu++;var jiaodu=cishu*90;for (var i = 0; i < geshu; i++) {wutai[i].style="transition:transform 1s "+100*i+"ms;transform:rotateX("+jiaodu+"deg)";} }CSS:
body{background: rgb(164, 239, 241); } #box{width: 600px;height: 250px;margin: 150px auto;perspective: 800px;perspective-origin: 500px; } .box1{width: 100px;height: 100%;float: left;position: relative;transform-style: preserve-3d;margin-left: -1px; } /*這幾個是讓背景圖片拼接，以它們的寬來定義的，background-position這個屬性可以移動背景圖片的位置*/ .box1:nth-child(2)>.mian{background-position: -100px 0; } .box1:nth-child(3)>.mian{background-position: -200px 0; } .box1:nth-child(4)>.mian{background-position: -300px 0; } .box1:nth-child(5)>.mian{background-position: -400px 0; } .box1:nth-child(6)>.mian{background-position: -500px 0; } .mian{width: 100%;height: 100%;position: absolute; } /*下面是設置的6個div給它們加了背景圖片*/ .mian:nth-child(1){transform: translateZ(125px);background: url(../images/lunbo1.jpg) no-repeat;background-size: 600px 100%; } .mian:nth-child(2){transform: translateZ(-125px);background: url(../images/lunbo2.jpg) no-repeat;background-size: 600px 100%; } .mian:nth-child(3){width: 250px;transform: rotateY(-90deg) translateZ(125px);background-color: black;} .mian:nth-child(4){width: 250px;transform: rotateY(90deg) translateZ(-25px);background-color: black;} .mian:nth-child(5){transform: rotateX(90deg) translateZ(125px);background: url(../images/lunbo3.jpg) no-repeat;background-size: 600px 100%; } .mian:nth-child(6){transform: rotateX(-90deg) translateZ(125px);background: url(../images/lunbo4.jpg) no-repeat;background-size: 600px 100%; }看起來很炫是不是，這個其實的制作原理就是按照我在上面提到的這些屬性去制作的，首先我們分析一下，在創建這個的時候，第一步我們要加入視距，然后是添加一個3D的舞臺，接著是把這些風景的圖片邊緣相接，最后在這些圖片的每個舞臺定義一個動畫，就是在鼠標點擊的時候觸發的動作，這樣這個就制作完成了，在這個例子中圖片的尺寸最好要相同。
總結：
在學習的這段時間里，我對css3 有了更深刻的理解，對于transform的這個屬性來說，它是根據你的想法去改變的。但是必須提到的一點是對于3D空間的理解，他可以讓你看到你想要的結果，總而言之我們要實打實的學好每一個屬性。
轉載于:https://www.cnblogs.com/niuyanan/p/6385811.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的CSS3 3D的总结（初学者易懂）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Selenium Webdriver——
- 下一篇： Chisel_LLDB调试命令