css3 3d 與案例分析

作者：魔潔

聊到3d那我們就先聊聊空間維度，首先一維，比如一條線就是一個一維空間，連點成線在這個空間里這些點只能前進后退，二維空間就是一個平面，這時點不僅可以前進后退還可以左右移動，3維空間也可以說是3d，這時點可以前進后退，左右，上下移動。css3里有幾個關於3d運動的屬性以及值我做一下解釋
transform-style:preserve-3d;（transform-style是屬性）（preserve-3d是值）
（這個屬性可以把一個處於2維的div變為3d空間，把這個屬性比作一個相機的攝像頭,這個div內的內容會以3d的形式通過攝像頭的形式反饋給你,他的子元素才會享受3d效果,子元素以下的元素就不會有3d效果。）
perspective:800px;
（這個屬性是配合上邊的屬性使用的 ，把這個屬性比作你的屏幕距離攝像頭的距離）
transform:rotateY(180deg);
(把這個3d空間div看做一個人rotateY(180deg)，是做y軸旋轉180°，y軸可以看作是一個人原地轉身)
transform:rotatex(180deg);
（rotateY(180deg)，是做x軸旋轉180°，x軸可以看作是一個人原地翻跟斗）
transform:rotateZ(180px);
（rotateZ(180px)，是在前進180px，x軸可以看作是一個人向前走180px，負值為后退）
看完這些相信下面的代碼回好理解許多。

• 1.卡牌反轉.
• 2.立方體
• 3.翻牌
• 4.旋轉木馬
• 5.魔方效果
• 6.多個立方體反轉

1.卡牌反轉

html

<div class="zf">
  <div class="bigbox">
    <div class="xiaobox1"></div>
    <div class="xiaobox2"></div>
  </div>
</div>

zf是你距離屏幕800px的攝像頭，bogbox是3d空間內的舞台，xiaobox1，xiaobox2是兩個背面相對的演員；

css

html,body{
  background:#ff9f96;
}

.zf{
  width: 300px;
  height: 300px;
  margin:200px auto;
  perspective:800px;
}
.bigbox{
  width:300px;
  height:300px;
  position:relative;
  transform-style:preserve-3d;/*把bigbox變為3D空間*/
  transition:transform 1s;
}
.xiaobox1{
  backface-visibility:hidden;/*這行代碼是xiaobox1設置為背面隱藏*/
  width:300px;
  height:300px;
  position:absolute;
  background:url(../img/dome061.jpg);
  background-size:650px 300px;February 10, 2017 10:48 AM
  transform:rotateY(180deg);/*讓xiaobox1原地旋轉180度*/
}
.xiaobox2{
  backface-visibility:hidden;
  width:300px;
  height:300px;
  position:absolute;
  background:url(../img/dome062.jpg);
  background-size:650px 300px;
}
.bigbox:hover{
  transform:rotateY(180deg);/*鼠標移到bigbox上他原地旋轉180度*/
}

2.立方體

html

<div class="bigbox">
   <div class="box">
     <div class="pm qian"></div>
     <div class="pm hou"></div>
     <div class="pm left"></div>
     <div class="pm right"></div>
     <div class="pm top"></div>
     <div class="pm bottom"></div>
   </div>
</div>

同上個案例最外邊的bigbox是距離屏幕800px的攝像頭，box是舞台，pm就是正方體的前后左右上下面

css

.bigbox{
  margin:150px auto;
  width:300px;
  height:300px;
  perspective:800px;
  transform-style:preserve-3d;
}
.box{
  transform-style:preserve-3d;
  width:300px;
  height:300px;
  position:relative;
  -webkit-animation:xuanzhuan 4s infinite linear ;/*誰讓box做無限循環的動畫*/
}
.pm{
  width:300px;
  height:300px;
  position:absolute;
  text-align:center;
  font-size:200px;
  line-height:300px;
}
.qian{
  transform:translateZ(150px)；/*讓qian向前走150px*/
  background:#59e7fa;
  background:url(../img/dome065.jpg);
  background-size:300px 300px;
}
.hou{
  transform:rotateY(-180deg) translateZ(150px);/*讓hou原地轉身180°，再向前走150px*/
  background:#fa5959;
  background:url(../img/dome065.jpg);
  background-size:300px 300px;
}
.top{
  transform:rotateX(90deg) translateZ(150px);/*沿x軸旋轉90°，向前走150px*/
  background:#f7fa59;
  background:url(../img/dome065.jpg);
  background-size:300px 300px;
}
.bottom{
  transform:rotateX(-90deg) translateZ(150px);/*沿x軸旋轉-90°，向前走150px*/
  background:#e359fa;
  background:url(../img/dome065.jpg);
  background-size:300px 300px;
}
.left{
  transform:rotateY(-90deg) translateZ(150px);/*沿y軸旋轉-90°，向前走150px*/
  background:#595ffa;
  background:url(../img/dome065.jpg);
  background-size:300px 300px;
}
.right{
  transform:rotateY(90deg) translateZ(150px);沿/*y軸旋轉90°，向前走150px*/
  background:#79fa59;
  background:url(../img/dome065.jpg);
  background-size:300px 300px;
}
@-webkit-keyframes xuanzhuan{
    0%{
      -webkit-transform: rotateY(0deg);
    }
    50%{
      -webkit-transform: rotateY(360deg);
    }
    51%{
      -webkit-transform: rotateX(0deg);
    }
    100%{
      -webkit-transform: rotateX(360deg);
    }
}

3.翻牌

html

<div class="box">
  <div id="a">
  </div>
</div>
<input type="button" class="btn" name="" value="上一步"/>
<input type="button" class="btn" name="" value="下一步"/>i

box是攝像頭，a是舞台，舞台里的演員我將用js渲染，class為fp

css

.box{ width:300px; height:300px; margin:auto; transform-style:preserve-3d; perspective:800px; }
#a{ float:left; transform-style:preserve-3d; width:300px; height:600px; position:relative; }
.btn{ width:60px; height:20px; border:0px; background:#ffe81c; color:#fff; text-align:center; line-height:20px; font-weight:700; cursor:pointer; }
.fp,.fp1,.fp2,.fp3,.fp4{ position:absolute; width:300px; height:300px; backface-visibility:hidden; font-size:150px; color:#fff; font-weight:700; text-align:center; line-height:300px; transform-origin:100% 100%;/*沿着下邊旋轉*/ }
.fp{ transform: rotateX(80deg); }
.fp1{ -webkit-animation:fz1 1s;/*執行動畫fz1*/ transform: rotateX(0deg);/*執行完動畫x軸是0°*/ }
.fp2{ -webkit-animation:fz2 1s;/*執行動畫fz2*/ transform: rotateX(80deg);/*執行完動畫x軸是80°*/ }
.fp3{ -webkit-animation:fz3 1s;/*執行動畫fz3*/ transform: rotateX(80deg);/*執行完動畫x軸是80°*/ }
.fp4{ -webkit-animation:fz4 1s;/*執行動畫fz4*/ transform: rotateX(0deg);/*執行完動畫x軸是0°*/ }
@-webkit-keyframes fz1{
    0%{ transform-origin:100% 100%; -webkit-transform: rotateX(80deg); }
    100%{ transform-origin:100% 100%; -webkit-transform: rotateX(0deg); }
}
@-webkit-keyframes fz2{
    0%{ transform-origin:100% 100%; -webkit-transform: rotateX(0deg); }
    100%{ transform-origin:100% 100%; -webkit-transform: rotateX(-280deg); }
}
@-webkit-keyframes fz3{
    0%{ transform-origin:100% 100%; -webkit-transform: rotateX(0deg); }
    100%{ transform-origin:100% 100%; -webkit-transform: rotateX(80deg); }
}
@-webkit-keyframes fz4{
    0%{ transform-origin:100% 100%; -webkit-transform: rotateX(80deg); }
    100%{ transform-origin:100% 100%; -webkit-transform: rotateX(360deg); }
}

因為我的背景圖是dome061.jpg，dome062.jpg，dome063.jpg，dome064.jpg，dome065.jpg，我會把他們第三位數字聲明在名為img的數組里

js

var img=[1,2,3,4,5];
    for(var i=0;i<5;i++){
      $('#a').append('<div class="fp cs" style="background:url(img/dome06'+img[i]+'.jpg);background-size:100% 100%;"></div>');
    }
    //上邊的for循環是渲染舞台里演員
    //pd是判斷按下按鈕的變量
    var pd=1;
    //a是判斷演員的下標
    var a=4;
    $('.btn').eq(1).click(function(){
      if(a<0){
        a=4;
      }
      if(pd==1){
        pd++;
        $('.fp').eq(a).removeClass('fp');//移除fp這個類
        $('.cs').eq(a).addClass('fp1');//因為演員我定義了兩個類把fp移除了，還可以用cs抓起取員
      }else{
        $('.cs').eq(a).removeClass('fp1');
        $('.cs').eq(a).removeClass('fp2');
        $('.cs').eq(a).removeClass('fp3');
        $('.cs').eq(a).removeClass('fp4');
        $('.cs').eq(a).addClass('fp2');//下標是a的演員移除fp1，fp2，fp3，fp4之后再加fp2
        $('.fp').eq(a-1).removeClass('fp');
        $('.cs').eq(a-1).removeClass('fp1');
        $('.cs').eq(a-1).removeClass('fp2');
        $('.cs').eq(a-1).removeClass('fp3');
        $('.cs').eq(a-1).removeClass('fp4');
        $('.cs').eq(a-1).addClass('fp1');//下標是a-1的演員移除fp，fp1，fp2，fp3，fp4之后再加fp4
        a--;
      }
      console.log(a,pd);
    })
    $('.btn').eq(0).click(function(){
      if(a>5){
        a=0;
      }
      if(pd==2){
        if(a==4){
          $('.cs').eq(a).removeClass('fp1');
          $('.cs').eq(a).removeClass('fp2');
          $('.cs').eq(a).removeClass('fp3');
          $('.cs').eq(a).removeClass('fp4');
          $('.cs').eq(a).addClass('fp3');//下標是a的演員移除fp1，fp2，fp3，fp4之后再加fp3
          $('.cs').eq(0).removeClass('fp1');
          $('.cs').eq(0).removeClass('fp2');
          $('.cs').eq(0).removeClass('fp3');
          $('.cs').eq(0).removeClass('fp4');
          $('.cs').eq(0).addClass('fp4');//下標是0的演員移除fp1，fp2，fp3，fp4之后再加fp4
        }
        $('.cs').eq(a).removeClass('fp1');
        $('.cs').eq(a).removeClass('fp2');
        $('.cs').eq(a).removeClass('fp3');
        $('.cs').eq(a).removeClass('fp4');
        $('.cs').eq(a).addClass('fp3');//下標是a的演員移除fp1，fp2，fp3，fp4之后再加fp3
        $('.cs').eq(a+1).removeClass('fp1');
        $('.cs').eq(a+1).removeClass('fp2');
        $('.cs').eq(a+1).removeClass('fp3');
        $('.cs').eq(a+1).removeClass('fp4');
        $('.cs').eq(a+1).addClass('fp4');//下標是a+1的演員移除fp1，fp2，fp3，fp4之后再加fp4
        a++;
      }
      //console.log(a,pd);
    })

4.旋轉木馬

按鍵盤方向鍵就會旋轉

html

<div class=bigbox>
  <div class="box">
  </div>
</div>

bigbox是攝像頭，box是舞台，舞台里的演員我將用js渲染，class為mian

css

.bigbox{ width:150px; height:100px; margin:200px auto; perspective:800px; transform-style:preserve-3d; }
.box{ transform-style:preserve-3d; position:relative; width:150px; height:100px; }
.mian{ width:150px; height:100px; position:absolute; text-align:center; color:#fff; background:#ff3efb; line-height:100px; font-size:80px; }
.box{ transition:transform 1s; }

同上一案例我把圖片不一樣的數字聲明在sum數組里

js

    var sum=[1,2,3,4,5,4,3,1,2];
    for(var i=0;i<9;i++){
      $('.box').append('<div class="mian"></div>');
      $('.mian').eq(i).css({'transform':'rotateY('+i*40+'deg) translateZ(240px)','background':'url(img/dome06'+sum[i]+'.jpg)','background-size':'100% 100%'});
    }
    //上邊的for循環是渲染舞台里演員
    var x=0;
    var y=0;
    $(window).keydown(function(event){
      var e = event || window.event || arguments.callee.caller.arguments[0];
      console.log(e)
      if(e && e.keyCode==37){ // 左
        y++;
        $('.box').css({'transform':"rotateX("+x*20+"deg) rotateY("+y*40+"deg)"});
      }
      if(e && e.keyCode==39){ // 右
          y--;
          $('.box').css({'transform':"rotateX("+x*20+"deg) rotateY("+y*40+"deg)"});
      }
      if(e && e.keyCode==38){ // 上
          x++;
          $('.box').css({'transform':"rotateX("+x*20+"deg) rotateY("+y*40+"deg)"});
      }
      if(e && e.keyCode==40){ // 下
          x--;
          $('.box').css({'transform':"rotateX("+x*20+"deg) rotateY("+y*40+"deg)"});
      }
    })
    //這段是寫按下方向鍵舞台旋轉，上邊聲明的x，y是舞台的x軸與y軸的角度數，event是記錄事件信息的對象，e.keyCode是按下時鍵盤的鍵值。

5.魔方效果

html

<div class="bigbox">
    <input type="button" class="btn" value="<"/>
    <div class="box"></div>
    <input type="button" class="btn" value=">"/>
</div>

bigbox是攝像頭，box是舞台，舞台里的演員我將用js渲染，class為kuai和mian

css

html,body{ background:#ff9f96; }
.bigbox{ width:900px; height:300px; margin:100px auto 0; }
.box{ width:604px; height:250px; transform-style:preserve-3d; perspective:800px; float:left; margin-left:103px; }
.btn{ height:40px; width:50px; color:#fff; background:#f5ff32; margin-top:105px; border:0px; font-size:30px; font-weight:700; }
.btn:nth-of-type(1){ float:left; }
.btn:nth-of-type(2){ float:right; }
.kuai{ float:left; width:100px; height:250px; transform-style:preserve-3d; position:relative; margin-left:-1px; }
.mian{ width:100px; height:250px; position:absolute; }
.kuai .mian:nth-of-type(1){ transform:translateZ(125px); background:url(../img/dome061.jpg) no-repeat; background-size:600px 250px; }
.kuai .mian:nth-of-type(2){ transform:rotateX(-90deg) translateZ(125px); background:url(../img/dome062.jpg) no-repeat; background-size:600px 250px; }
.kuai .mian:nth-of-type(3){ transform:rotateX(180deg) translateZ(125px); background:url(../img/dome063.jpg) no-repeat; background-size:600px 250px; }
.kuai .mian:nth-of-type(4){ transform:rotateX(90deg) translateZ(125px); background:url(../img/dome064.jpg) no-repeat; background-size:600px 250px; }
.kuai .mian:nth-of-type(5){ width:250px; height:250px; background:#000; transform:rotateY(-90deg) translateZ(125px); }
.kuai .mian:nth-of-type(6){ width:250px; height:250px; background:#000; transform:rotateY(90deg) translateZ(-25px); }

js

var kuai=document.getElementsByClassName('kuai');
  for(i=0;i<6;i++){
    $('.box').append('<div class="kuai"><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>');
    kuai[i].getElementsByClassName('mian')[0].style='background-position:'+-100*i+'px 0px';
    kuai[i].getElementsByClassName('mian')[1].style='background-position:'+-100*i+'px 0px';
    kuai[i].getElementsByClassName('mian')[2].style='background-position:'+-100*i+'px 0px';
    kuai[i].getElementsByClassName('mian')[3].style='background-position:'+-100*i+'px 0px';
  }
  //上邊的for循環是渲染舞台里演員
  var x=0;
  var xuanzuan=setInterval(function(){
    x++;
    for(i=0;i<6;i++){
      for(i=0;i<6;i++){
        kuai[i].style='transition:transform 1s '+100*i+'ms;transform:rotateX('+90*x+'deg)';
      }
    }
  },4000)
  //上邊的計時器是寫讓class是kuai的div旋轉這個div的下標是幾就讓他延遲幾毫秒
  $('.btn').eq(0).click(function(){
    x--;
    for(i=0;i<6;i++){
      kuai[i].style='transition:transform 1s '+100*i+'ms;transform:rotateX('+90*x+'deg)'
    }
  })
  //按下第一個按鈕讓class是kuai的div以上邊計時器的方式運動不過方向相反
  $('.btn').eq(1).click(function(){
    x++;
    for(i=0;i<6;i++){
      kuai[i].style='transition:transform 1s '+100*i+'ms;transform:rotateX('+90*x+'deg)'
    }
  })
  //按下第二個按鈕讓class是kuai的div以上邊計時器的方式運動

6.多個立方體反轉

html

<div class="box"></div>

box是攝像頭，舞台里的演員我將用js渲染，class為kuai和mian

css

html,body{ height:100%; background:#afff60; }
.box{ width:610px; height:610px; transform-style:preserve-3d; perspective:800px; margin:50px auto 0; }
.kuai{ float:left; width:100px; height:100px; transform-style:preserve-3d; position:relative; margin:10px; }
.mian{ width:100px; height:100px; position:absolute; font-size:60px; font-weight:700; color:#00f0ff; line-height:100px; text-align:center; }
.kuai .mian:nth-of-type(1){ transform:translateZ(50px); background:url(../img/dome065.jpg) no-repeat; background-size:100px 100px; }
.kuai .mian:nth-of-type(2){ transform:rotateX(-90deg) translateZ(50px); background:url(../img/dome065.jpg) no-repeat; background-size:100px 100px; }
.kuai .mian:nth-of-type(3){ transform:rotateX(180deg) translateZ(50px); background:url(../img/dome065.jpg) no-repeat; background-size:100px 100px; }
.kuai .mian:nth-of-type(4){ transform:rotateX(90deg) translateZ(50px); background:url(../img/dome065.jpg) no-repeat; background-size:100px 100px; }
.kuai .mian:nth-of-type(5){ transform:rotateY(-90deg) translateZ(50px); background:url(../img/dome065.jpg) no-repeat; background-size:100px 100px; }
.kuai .mian:nth-of-type(6){ transform:rotateY(90deg) translateZ(50px); background:url(../img/dome065.jpg) no-repeat; background-size:100px 100px; }

js

for(i=0;i<20;i++){
    $('.box').append('<div class="kuai"><div class="mian">'+i+'</div><div class="mian"></div><div class="mian"></div><div class="mian"></div>'+
    '<div class="mian"></div><div class="mian"></div></div>');
    //上邊一段是渲染舞台和演員
    $('.kuai').eq(i).mouseover(function(){
      $(this).attr('style','transition:transform 0.1s;transform:translateZ(100px) rotateY(180deg);');
    })
    //當鼠標移到class為kuai的div上時他先沿着z軸向前走100px，再沿着y軸旋轉180°
    $('.kuai').eq(i).mouseout(function(){
      $(this).attr('style','transition:transform 0.1s;transform:rotateY(0deg) translateZ(0px);');
    })
    當鼠標移下class為kuai的div上時他先沿着z軸向前走回0px位置，再沿着y軸旋轉回0°
    $(window).eq(i).mousemove(function(event){
      var e = event || window.event || arguments.callee.caller.arguments[0];
      var xjd;
      var yjd;
      if(e.clientX>674){
        xjd=parseInt(e.clientX/80);
      }else{
        xjd=parseInt(-17+e.clientX/40);
      }
      if(e.clientY>330){
        yjd=parseInt(e.clientY/-66);
      }else{
        yjd=parseInt(11-e.clientY/33);
      }
      $('.box').attr('style','transform:rotateY('+xjd+'deg) rotateX('+yjd+'deg)')
    })
  }
  //這段是寫box隨着鼠標移動而變化

• 此文為原創，轉載請注明出處：https://i.cnblogs.com/EditPosts.aspx?postid=6385775&update=1