css 3D小結

CSS 3D—-來自小菜鳥的總結

首先你要學習一些基礎知識

咱們是用transform來實現各類炫酷吊炸天的效果

transform的幾個屬性咱們要記住：

rotate() 順時針旋轉
scale() 縮放
skew() 傾斜
transform()移動

動手實踐一下

<style media="screen"> .box{ width: 20px; height: 20px; background-color: red; transform: rotate(45deg) scale(2) skew(29deg,30deg) translate(20px,20px);}</style> <divclass="box"> </div>

以上這些是2D知識必定要記住！！！

接下來咱們來學習3D基礎知識

1. perspective (視距,景深) ：眼睛距離物體的距離
   

2. perspective-origin (視點)：眼睛所在位置，默認爲中心

   (1)transform-origin:center（默認值，等價於：center center/ 50% 50%）
   
   (2)transform-origin:top（等價於：top center/center top）
   
   (3)transform-origin:bottom（等價於：bottom center/center bottom）
   
   (4)transform-origin:right（等價於：right center/center right）
   
   (5)transform-origin:left（等價於：left center/center left）
   
   (6)transform-origin:top left（等價於：left top）
   
   同理，還能夠設置爲：transform-origin:top right（右上角爲原點）、transform-origin:bottom right（右下角爲原點）、transform-origin:bottom left（左下角爲原點）

3. transfrom
   (1) rotateX() rotateY() rotateZ()
   
   (2) transform-origin:旋轉的基軸 top bottom left right center
   (3) transform-style:preserve-3d;定義3D空間
   (4) backface-visibility: hidden;背面不可見

   基本知識點就這麼少

   實踐出真知來來來作幾個小案例

   <div class="cam"> <div class="box"> <div class=" card box1"></div> <div class=" card box2"></div> </div> </div>

   css

   body{ background: #e6fff9; } .cam{ perspective: 800px; 視距是800px transform-style: preserve-3d;打造3D空間 perspective-origin:center; 視角是在正中間 } .box{ transform-style: preserve-3d; perspective-origin:center; width: 200px; height: 200px; margin: 100px auto; position: relative; 相對定位 transition:transform 2s; } .box:hover{ transform: rotateY(180deg); } .box .card{ width: 200px; height: 200px; font-size: 150px; color: white; line-height: 200px; text-align: center; position: absolute; 絕對定位 } .box1{ background:url(./img/1p.JPG) no-repeat ; background-size: cover; } .box2{ background:url(./img/2p.JPG) no-repeat; background-size: cover; transform: rotateY(180deg); backface-visibility: hidden; 背面不可見 }

第二個小案例

<div class="camer"> <div class="wutai"> <div class="page top"></div> <div class="page bottom"></div> <div class="page left"></div> <div class="page right"></div> <div class="page front"></div> <div class="page back"></div> </div> </div>

css

body{ background: #eadcec; } .camer{ perspective: 800px; width: 300px; margin: 100px auto; } .wutai{ width: 300px; height: 300px; position: relative; transform-style: preserve-3d; transform: rotateX(30deg) rotateY(30deg); -webkit-animation:bianhuan 5s infinite linear; } .page{ position: absolute; width: 300px; height: 300px; opacity: 0.9; } .page.left{ background:url(img/1.jpg) no-repeat; background-size: cover; transform: rotateY(-90deg) translateZ(150px); } .page.right{ background:url(img/2.jpg) no-repeat; background-size: cover; transform: rotateY(90deg) translateZ(150px); } .page.top{ background:url(img/3.jpg) no-repeat; background-size: cover; transform: rotateX(90deg) translateZ(150px); } .page.bottom{ background:url(img/4.jpg) no-repeat; background-size: cover; transform: rotateX(-90deg) translateZ(150px); } .page.front{ background:url(img/5.jpg) no-repeat; background-size: cover; transform: translateZ(150px); font-size: 150px; } .page.back{ background:url(img/6.jpg) no-repeat; background-size: cover; transform: translateZ(-150px); } @-webkit-keyframes bianhuan{ 動畫效果 0%{ -webkit-transform:rotateY(0deg); } 50%{ -webkit-transform:rotateY(360deg); } 51%{ -webkit-transform:rotateX(0deg); } 100%{ -webkit-transform:rotateX(360deg); } }

第三個小案例

<div class="camer"> <div id="wutai"> <div class="page"><img src="img/1.jpg" alt=""></div> <div class="page"><img src="img/2.jpg" alt=""></div> <div class="page"><img src="img/3.jpg" alt=""></div> <div class="page"><img src="img/4.jpg" alt=""></div> <div class="page"><img src="img/5.jpg" alt=""></div> <div class="page"><img src="img/6.jpg" alt=""></div> <div class="page"><img src="img/7.jpg" alt=""></div> <div class="page"><img src="img/8.jpg" alt=""></div> </div> </div> <div class="box"> <input type="button" value="<" id="left"> <input type="button" value=">" id="right"> </div>

CSS

body{ background: #f2ded3; } .camer{ width: 400px; perspective:800px; margin:150px auto; transform:rotateX(-10deg) rotateY(0deg); } wutai{ width: 200px; height: 100px; transform-style: preserve-3d; position: relative; transition: all 1s; } .page{ width: 200px; height: 100px; position: absolute; } img{ width: 200px; height: 100px; } .box{ width: 200px; background-color: red; margin-left: 460px; } .box #left{ float: left; width: 50px; height: 30px; background:#199ef2; border: 1px; color: white; } .box #right{ float: right; width: 50px; height: 30px; background:#199ef2; border: 1px; color: white; }

js

window.onload=function(){ var mystyle=document.getElementById("mystyle"); var stylestr=""; //開始作多邊形 for(var i=0;i<9;i++){ stylestr+=".page:nth-last-of-type("+(i+1)+"){transform:rotateY("+(60*i)+"deg)translateZ(173px);}" } mystyle.innerHTML=stylestr; var wutai=document.getElementById("wutai"); var d=0; var left=document.getElementById("left"); var right=document.getElementById("right"); left.onclick=function(){ d--; wutai.style.transform="rotateY("+70*d+"deg)"; } right.onclick=function(){ d++; wutai.style.transform="rotateY("+70*d+"deg)" } }

作了幾個小案例是否是以爲其實傳說中的3D也沒想象中那麼難

固然想要學好3D還須要咱們不斷學習和練習

作了這幾個案例不知道有沒有發現想要作一個效果首先要有一個大的div來設置視距大小其次再套一個div來設置transform的3D效果最後再加入本身想要實現的效果。