碼上快樂

相關內容    簡體    繁體

CSS3 3D的總結（初學者易懂）

本文轉載自   查看原文   2017-02-10 12:23   1088 

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空間的理解，他可以讓你看到你想要的結果，總而言之我們要實打實的學好每一個屬性。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 CSS3—3D翻轉 寫給已有編程經驗的 Python 初學者的總結【轉】 寫給已有編程經驗的 Python 初學者的總結 Linux bash總結(二) 高級部分(適合初學者學習和非初學者參考) (持續更新中...) Java初學者：初學者的注意事項 oracle初學者入門 CSS3 實現3D旋轉木馬 CSS3 3D笨蛋教程 css3 transform旋轉有3d效果 CSS3之3D變換實例詳解
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM