人人都能讀懂的css3 3d小demo

css3 3d案例總結

最近入坑 Web 動畫，所以把自己的學習過程記錄一下分享給大家。就把最近做的比較好的給大家分享下

1.旋轉拼圖

首先看下效果

代碼主要由HTML和CSS3組成，應該說還是比較簡單的。

首先是HTML代碼：

  <p class="camera" id="camera">    <p class="kuai">      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>    </p>    <p class="kuai">      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>    </p>    <p class="kuai">      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>    </p>    <p class="kuai">      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>    </p>    <p class="kuai">      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>      <p class="mian"></p>    </p>  </p>

這裡用了3層p的HTML架構，層次非常清晰。
接下來重點是CSS代碼，如何用CSS3的特性來實現3d和滾動效果，從來讓其看起來呈3D的狀態。

body{  background: red;}/*對於相機元素*/.camera{  perspective: 800px;/*這個屬性是視距(景深)，就是目測的距離*/  width: 500px;  height: 300px;  margin: auto;  transform-style: preserve-3d;/*該屬性規定如何在 3D 空間中呈現被嵌套的元素。preserve-3d子項目將保留其 3D 位置。*/}/*對於模組元素*/.kuai{  width: 100px;  height: 300px;  margin: 50px auto;  float: left;  transform-style: preserve-3d;  position: relative;  transition:transform 1s;  margin-left: -1px;}/*對於模組的每個面元素*/.kuai:nth-of-type(2)>.mian{  background-position: -100px 0;}.kuai:nth-of-type(3)>.mian{  background-position: -200px 0;}.kuai:nth-of-type(4)>.mian{  background-position: -300px 0;}.kuai:nth-of-type(5)>.mian{  background-position: -400px 0;}.kuai:nth-of-type(6)>.mian{  background-position: -500px 0;}.mian{  width: 100px;  height: 300px;  position: absolute;  font-size:100px;  text-align: center;  line-height: 300px;  transform-style: preserve-3d;  background-color: black;  backface-visibility: hidden;}.mian:nth-of-type(1){  transform: translateZ(150px);  background:url(../images/pic1.jpg) no-repeat;  background-size: 500px 100%;}.mian:nth-of-type(2){  transform: translateZ(-150px) rotateX(180deg);  background:url(../images/pic2.png) no-repeat;  background-size: 500px 100%;}.mian:nth-of-type(3){  width: 300px;  transform: rotateY(-90deg) translateZ(150px);/*3d中transform屬性是關鍵的，它主要是靠旋轉 移動 縮放來變形實現的*/}.mian:nth-of-type(4){  width: 300px;  transform: rotateY(90deg) translateZ(-50px);}.mian:nth-of-type(5){  transform: rotateX(90deg) translateZ(150px);  background:url(../images/pic3.jpg) no-repeat;  background-size: 500px 100%;}.mian:nth-of-type(6){  transform: rotateX(-90deg) translateZ(150px);  background:url(../images/pic4.jpg) no-repeat;  background-size: 500px 100%;}

最後就是js

window.onload=function() {  var camera=document.getElementById('camera');  var kuais=camera.getElementsByClassName('kuai');  var chishu=0;  var geshu=5;  camera.onclick=function() {    chishu++;    for(var i=0;i<geshu;i++){      kuais[i].style="transition:transform 1s "+100*i+"ms;transform:rotateX("+chishu*90+"deg)";    }  }}

這裡有個屬性沒用到 transform-origin,它是用來改變元素的原點位置,可以不設定。

同理，還可以設定為：transform-origin:top right（右上方為原點）、transform-origin:bottom right（右下角為原點）、transform-origin:bottom left（左下角為原點）

總結

總而言之，在我學習CSS3的過程中，見到了不少的新特性，也學會了如何使用，但是我想說的是我們不管要學會怎麼使用，更要去理解每一行代碼為什麼產生對應的效果，特別是對於3D transform，我們要從根本去理解了3D空間，才能更好的去掌握它的每一個屬性值能夠帶來的效果。