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随着鼠标移动而变化

generated by haroopad

div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 10px; padding: 8px 10px 0; font: 13.34px/1.4 helvetica, arial, freesans, clean, sans-serif; width: 452px; background-color: #fff }
div.oembedall-githubrepos .oembedall-body { background: -webkit-gradient(linear,left top,left bottom,from(#FAFAFA),to(#EFEFEF)); border-top: 1px solid #EEE; margin-left: -10px; margin-top: 8px; padding: 5px 10px; width: 100% }
div.oembedall-githubrepos h3 { font-size: 14px; margin: 0; padding-left: 18px; white-space: nowrap }
div.oembedall-githubrepos p.oembedall-description { color: #444; font-size: 12px; margin: 0 0 3px }
div.oembedall-githubrepos p.oembedall-updated-at { color: #888; font-size: 11px; margin: 0 }
div.oembedall-githubrepos ul.oembedall-repo-stats { border: none; float: right; font-size: 11px; font-weight: 700; padding-left: 15px; position: relative; z-index: 5; margin: 0 }
div.oembedall-githubrepos ul.oembedall-repo-stats li { border: none; color: #666; display: inline-block; list-style-type: none; margin: 0 !important }
div.oembedall-githubrepos ul.oembedall-repo-stats li a { background-color: transparent; border: none; color: #666 !important; background-position: 5px -2px; background-repeat: no-repeat; border-left: 1px solid #DDD; display: inline-block; height: 21px; line-height: 21px; padding: 0 5px 0 23px }
div.oembedall-githubrepos ul.oembedall-repo-stats li:first-child a { border-left: medium none; margin-right: -3px }
div.oembedall-githubrepos ul.oembedall-repo-stats li a:hover { background: 5px -27px no-repeat #4183C4; color: #FFF !important; text-decoration: none }
div.oembedall-githubrepos ul.oembedall-repo-stats li:first-child a:hover { }
ul.oembedall-repo-stats li:last-child a:hover { }
span.oembedall-closehide { background-color: #aaa; cursor: pointer; margin-right: 3px }
div.oembedall-container { margin-top: 5px; text-align: left }
.oembedall-ljuser { font-weight: 700 }
.oembedall-ljuser img { vertical-align: bottom; border: 0; padding-right: 1px }
.oembedall-stoqembed { border-bottom: 1px dotted #999; float: left; overflow: hidden; width: 730px; line-height: 1; background: #FFF; color: #000; font-family: Arial, Liberation Sans, DejaVu Sans, sans-serif; font-size: 80%; text-align: left; margin: 0; padding: 0 }
.oembedall-stoqembed a { color: #07C; text-decoration: none; margin: 0; padding: 0 }
.oembedall-stoqembed a:hover { text-decoration: underline }
.oembedall-stoqembed a:visited { color: #4A6B82 }
.oembedall-stoqembed h3 { font-family: Trebuchet MS, Liberation Sans, DejaVu Sans, sans-serif; font-size: 130%; font-weight: 700; margin: 0; padding: 0 }
.oembedall-stoqembed .oembedall-reputation-score { color: #444; font-size: 120%; font-weight: 700; margin-right: 2px }
.oembedall-stoqembed .oembedall-user-info { height: 35px; width: 185px }
.oembedall-stoqembed .oembedall-user-info .oembedall-user-gravatar32 { float: left; height: 32px; width: 32px }
.oembedall-stoqembed .oembedall-user-info .oembedall-user-details { float: left; margin-left: 5px; overflow: hidden; white-space: nowrap; width: 145px }
.oembedall-stoqembed .oembedall-question-hyperlink { font-weight: 700 }
.oembedall-stoqembed .oembedall-stats { background: #EEE; margin: 0 0 0 7px; padding: 4px 7px 6px; width: 58px }
.oembedall-stoqembed .oembedall-statscontainer { float: left; margin-right: 8px; width: 86px }
.oembedall-stoqembed .oembedall-votes { color: #555; padding: 0 0 7px; text-align: center }
.oembedall-stoqembed .oembedall-vote-count-post { font-size: 240%; color: #808185; display: block; font-weight: 700 }
.oembedall-stoqembed .oembedall-views { color: #999; padding-top: 4px; text-align: center }
.oembedall-stoqembed .oembedall-status { margin-top: -3px; padding: 4px 0; text-align: center; background: #75845C; color: #FFF }
.oembedall-stoqembed .oembedall-status strong { color: #FFF; display: block; font-size: 140% }
.oembedall-stoqembed .oembedall-summary { float: left; width: 635px }
.oembedall-stoqembed .oembedall-excerpt { line-height: 1.2; margin: 0; padding: 0 0 5px }
.oembedall-stoqembed .oembedall-tags { float: left; line-height: 18px }
.oembedall-stoqembed .oembedall-tags a:hover { text-decoration: none }
.oembedall-stoqembed .oembedall-post-tag { background-color: #E0EAF1; border-bottom: 1px solid #3E6D8E; border-right: 1px solid #7F9FB6; color: #3E6D8E; font-size: 90%; line-height: 2.4; margin: 2px 2px 2px 0; padding: 3px 4px; text-decoration: none; white-space: nowrap }
.oembedall-stoqembed .oembedall-post-tag:hover { background-color: #3E6D8E; border-bottom: 1px solid #37607D; border-right: 1px solid #37607D; color: #E0EAF1 }
.oembedall-stoqembed .oembedall-fr { float: right }
.oembedall-stoqembed .oembedall-statsarrow { background-image: url("http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3"); background-repeat: no-repeat; overflow: hidden; background-position: 0 -435px; float: right; height: 13px; margin-top: 12px; width: 7px }
.oembedall-facebook1 { border: 1px solid #1A3C6C; padding: 0; font: 13.34px/1.4 verdana; width: 500px }
.oembedall-facebook2 { background-color: #627add }
.oembedall-facebook2 a { color: #e8e8e8; text-decoration: none }
.oembedall-facebookBody { background-color: #fff; vertical-align: top; padding: 5px }
.oembedall-facebookBody .contents { display: inline-block; width: 100% }
.oembedall-facebookBody div img { float: left; margin-right: 5px }
div.oembedall-lanyard { background-attachment: scroll; background-color: transparent; background-image: none; border-width: 0; color: #112644; display: block; float: left; font-family: "Trebuchet MS", Trebuchet, sans-serif; font-size: 16px; height: 253px; line-height: 19px; margin: 0; max-width: none; min-height: 0; outline: #112644 0; padding: 0; position: relative; text-align: left; vertical-align: baseline; width: 804px }
div.oembedall-lanyard .tagline { font-size: 1.5em }
div.oembedall-lanyard .wrapper { overflow: hidden; clear: both }
div.oembedall-lanyard .split { float: left; display: inline }
div.oembedall-lanyard .prominent-place .flag:active,div.oembedall-lanyard .prominent-place .flag:focus,div.oembedall-lanyard .prominent-place .flag:hover,div.oembedall-lanyard .prominent-place .flag:link,div.oembedall-lanyard .prominent-place .flag:visited { float: left; display: block; width: 48px; height: 48px; position: relative; top: -5px; margin-right: 10px }
div.oembedall-lanyard .place-context { font-size: .889em }
div.oembedall-lanyard .prominent-place .sub-place { display: block }
div.oembedall-lanyard .prominent-place { font-size: 1.125em; line-height: 1.1em; font-weight: 400 }
div.oembedall-lanyard .main-date { color: #8CB4E0; font-weight: 700; line-height: 1.1 }
div.oembedall-lanyard .first { width: 48.57%; margin: 0 0 0 2.857% }
.mermaid .label { color: #333 }
.node circle,.node polygon,.node rect { }
.edgePath .path { }
.cluster rect { }
.cluster text { }
.actor { }
text.actor { }
.actor-line { }
.messageLine0 { }
.messageLine1 { }
#arrowhead { }
#crosshead path { }
.messageText { }
.labelBox { }
.labelText,.loopText { }
.loopLine { }
.note { }
.noteText { font-family: "trebuchet ms", verdana, arial; font-size: 14px }
.section { opacity: .2 }
.section0,.section2 { }
.section1,.section3 { opacity: .2 }
.sectionTitle0,.sectionTitle1,.sectionTitle2,.sectionTitle3 { }
.sectionTitle { font-size: 11px }
.grid .tick { opacity: .3 }
.grid path { }
.today { }
.task { }
.taskText { font-size: 11px }
.taskTextOutsideRight { font-size: 11px }
.taskTextOutsideLeft { font-size: 11px }
.taskText0,.taskText1,.taskText2,.taskText3 { }
.task0,.task1,.task2,.task3 { }
.taskTextOutside0,.taskTextOutside1,.taskTextOutside2,.taskTextOutside3 { }
.active0,.active1,.active2,.active3 { }
.activeText0,.activeText1,.activeText2,.activeText3 { }
.done0,.done1,.done2,.done3 { }
.doneText0,.doneText1,.doneText2,.doneText3 { }
.crit0,.crit1,.crit2,.crit3 { }
.activeCrit0,.activeCrit1,.activeCrit2,.activeCrit3 { }
.doneCrit0,.doneCrit1,.doneCrit2,.doneCrit3 { cursor: pointer }
.activeCritText0,.activeCritText1,.activeCritText2,.activeCritText3,.doneCritText0,.doneCritText1,.doneCritText2,.doneCritText3 { }
.titleText { font-size: 18px }
text { font-family: "trebuchet ms", verdana, arial; font-size: 14px }
html { height: 100% }
body { margin: 0 !important; padding: 5px 20px 26px !important; background-color: #fff; font-family: "Lucida Grande", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Lucida Sans Unicode", Helvetica, Arial, sans-serif; font-size: .9em }
br,h1,h2,h3,h4,h5,h6 { clear: both }
hr.page { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC") repeat-x; border: 0; height: 3px; padding: 0 }
hr.underscore { border-top-style: dashed !important }
body>:first-child { margin-top: 0 !important }
img.plugin { }
iframe { border: 0 }
figure { }
kbd { border: 1px solid #aaa; background-color: #f9f9f9; background-image: linear-gradient(top,#eee,#f9f9f9,#eee); padding: 1px 3px; font-family: inherit; font-size: .85em }
.oembeded .oembed_photo { display: inline-block }
img[data-echo] { margin: 25px 0; width: 100px; height: 100px; background: url("../img/ajax.gif") center center no-repeat #fff }
.spinner { display: inline-block; width: 10px; height: 10px; margin-bottom: -.1em; border: 2px solid rgba(0,0,0,.5); border-top-color: transparent }
.spinner::after { content: ""; display: block; width: 0; height: 0; position: absolute; top: -6px; left: 0; border: 4px solid transparent; border-bottom-color: rgba(0,0,0,.5) }
p.toc { margin: 0 !important }
p.toc ul { padding-left: 10px }
p.toc>ul { padding: 10px; margin: 0 10px; display: inline-block; border: 1px solid #ededed }
p.toc li,p.toc ul { list-style-type: none }
p.toc li { width: 100%; padding: 0; overflow: hidden }
p.toc li a::after { content: "." }
p.toc li a::before { content: "? " }
p.toc h5 { text-transform: uppercase }
p.toc .title { float: left; padding-right: 3px }
p.toc .number { margin: 0; float: right; padding-left: 3px; background: #fff; display: none }
input.task-list-item { margin-left: -1.62em }
.markdown { font-family: "Hiragino Sans GB", "Microsoft YaHei", STHeiti, SimSun, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Segoe UI", AppleSDGothicNeo-Medium, "Malgun Gothic", Verdana, Tahoma, sans-serif; padding: 20px }
.markdown a { text-decoration: none; vertical-align: baseline }
.markdown a:hover { text-decoration: underline }
.markdown h1 { font-size: 2.2em; font-weight: 700; margin: 1.5em 0 1em }
.markdown h2 { font-size: 1.8em; font-weight: 700; margin: 1.275em 0 .85em }
.markdown h3 { font-size: 1.6em; font-weight: 700; margin: 1.125em 0 .75em }
.markdown h4 { font-size: 1.4em; font-weight: 700; margin: .99em 0 .66em }
.markdown h5 { font-size: 1.2em; font-weight: 700; margin: .855em 0 .57em }
.markdown h6 { font-size: 1em; font-weight: 700; margin: .75em 0 .5em }
.markdown h1+p,.markdown h1:first-child,.markdown h2+p,.markdown h2:first-child,.markdown h3+p,.markdown h3:first-child,.markdown h4+p,.markdown h4:first-child,.markdown h5+p,.markdown h5:first-child,.markdown h6+p,.markdown h6:first-child { margin-top: 0 }
.markdown hr { border: 1px solid #ccc }
.markdown p { margin: 1em 0 }
.markdown ol { list-style-type: decimal }
.markdown li { display: list-item; line-height: 1.4em }
.markdown blockquote { margin: 1em 20px }
.markdown blockquote>:first-child { margin-top: 0 }
.markdown blockquote>:last-child { margin-bottom: 0 }
.markdown blockquote cite::before { content: "—?" }
.markdown .code { }
.markdown pre { border: 1px solid #ccc; overflow: auto; padding: .5em }
.markdown pre code { border: 0; display: block }
.markdown pre>code { font-family: Consolas, Inconsolata, Courier, monospace; font-weight: 700; white-space: pre; margin: 0 }
.markdown code { border: 1px solid #ccc; padding: 0 5px; margin: 0 2px }
.markdown img { max-width: 100% }
.markdown mark { color: #000; background-color: #fcf8e3 }
.markdown table { padding: 0; border-collapse: collapse; border-spacing: 0; margin-bottom: 16px }
.markdown table tr td,.markdown table tr th { border: 1px solid #ccc; margin: 0; padding: 6px 13px }
.markdown table tr th { font-weight: 700 }
.markdown table tr th>:first-child { margin-top: 0 }
.markdown table tr th>:last-child { margin-bottom: 0 }
.markdown table tr td>:first-child { margin-top: 0 }
.markdown table tr td>:last-child { margin-bottom: 0 }
.haroopad { padding: 20px; color: #222; font-size: 15px; font-family: "Roboto Condensed", Tauri, "Hiragino Sans GB", "Microsoft YaHei", STHeiti, SimSun, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Segoe UI", AppleSDGothicNeo-Medium, "Malgun Gothic", Verdana, Tahoma, sans-serif; background: #fff; line-height: 1.6 }
.haroopad a { color: #3269a0 }
.haroopad a:hover { color: #4183c4 }
.haroopad h2 { border-bottom: 1px solid #e6e6e6 }
.haroopad h6 { color: #777 }
.haroopad hr { border: 1px solid #e6e6e6 }
.haroopad blockquote>code,.haroopad h1>code,.haroopad h2>code,.haroopad h3>code,.haroopad h4>code,.haroopad h5>code,.haroopad h6>code,.haroopad li>code,.haroopad p>code,.haroopad td>code { font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 85%; background-color: rgba(0,0,0,.02); padding: .2em .5em; border: 1px solid #efefef }
.haroopad pre>code { font-size: 1em; letter-spacing: -1px; font-weight: 700 }
.haroopad blockquote { border-left: 4px solid #e6e6e6; padding: 0 15px; color: #777 }
.haroopad table { background-color: #fafafa }
.haroopad table tr td,.haroopad table tr th { border: 1px solid #e6e6e6 }
.haroopad table tr:nth-child(2n) { background-color: #f2f2f2 }
.hljs { display: block; padding: .5em; background: #fdf6e3; color: #657b83 }
.diff .hljs-header,.hljs-comment,.hljs-doctype,.hljs-javadoc,.hljs-pi,.lisp .hljs-string { color: #93a1a1 }
.css .hljs-tag,.hljs-addition,.hljs-keyword,.hljs-request,.hljs-status,.hljs-winutils,.method,.nginx .hljs-title { color: #859900 }
.hljs-command,.hljs-dartdoc,.hljs-hexcolor,.hljs-link_url,.hljs-number,.hljs-phpdoc,.hljs-regexp,.hljs-rules .hljs-value,.hljs-string,.hljs-tag .hljs-value,.tex .hljs-formula { color: #2aa198 }
.css .hljs-function,.hljs-built_in,.hljs-chunk,.hljs-decorator,.hljs-id,.hljs-identifier,.hljs-localvars,.hljs-title,.vhdl .hljs-literal { color: #268bd2 }
.hljs-attribute,.hljs-class .hljs-title,.hljs-constant,.hljs-link_reference,.hljs-parent,.hljs-type,.hljs-variable,.lisp .hljs-body,.smalltalk .hljs-number { color: #b58900 }
.css .hljs-pseudo,.diff .hljs-change,.hljs-attr_selector,.hljs-cdata,.hljs-header,.hljs-pragma,.hljs-preprocessor,.hljs-preprocessor .hljs-keyword,.hljs-shebang,.hljs-special,.hljs-subst,.hljs-symbol,.hljs-symbol .hljs-string { color: #cb4b16 }
.hljs-deletion,.hljs-important { color: #dc322f }
.hljs-link_label { color: #6c71c4 }
.tex .hljs-formula { background: #eee8d5 }
.MathJax_Hover_Frame { border: 1px solid #A6D !important; display: inline-block; position: absolute }
.MathJax_Hover_Arrow { position: absolute; width: 15px; height: 11px; cursor: pointer }
#MathJax_About { position: fixed; left: 50%; width: auto; text-align: center; border: 3px outset; padding: 1em 2em; background-color: #DDD; color: #000; cursor: default; font-family: message-box; font-size: 120%; font-style: normal; text-indent: 0; text-transform: none; line-height: normal; letter-spacing: normal; word-spacing: normal; white-space: nowrap; float: none; z-index: 201 }
.MathJax_Menu { position: absolute; background-color: #fff; color: #000; width: auto; padding: 2px; border: 1px solid #CCC; margin: 0; cursor: default; font: menu; text-align: left; text-indent: 0; text-transform: none; line-height: normal; letter-spacing: normal; word-spacing: normal; white-space: nowrap; float: none; z-index: 201 }
.MathJax_MenuItem { padding: 2px 2em; background: 0 0 }
.MathJax_MenuArrow { position: absolute; right: .5em; color: #666 }
.MathJax_MenuActive .MathJax_MenuArrow { color: #fff }
.MathJax_MenuArrow.RTL { left: .5em; right: auto }
.MathJax_MenuCheck { position: absolute; left: .7em }
.MathJax_MenuCheck.RTL { right: .7em; left: auto }
.MathJax_MenuRadioCheck { position: absolute; left: 1em }
.MathJax_MenuRadioCheck.RTL { right: 1em; left: auto }
.MathJax_MenuLabel { padding: 2px 2em 4px 1.33em; font-style: italic }
.MathJax_MenuRule { border-top: 1px solid #CCC; margin: 4px 1px 0 }
.MathJax_MenuDisabled { color: GrayText }
.MathJax_MenuActive { background-color: Highlight; color: HighlightText }
.MathJax_Menu_Close { position: absolute; width: 31px; height: 31px; top: -15px; left: -15px }
#MathJax_Zoom { position: absolute; background-color: #F0F0F0; overflow: auto; display: block; z-index: 301; padding: .5em; border: 1px solid #000; margin: 0; font-weight: 400; font-style: normal; text-align: left; text-indent: 0; text-transform: none; line-height: normal; letter-spacing: normal; word-spacing: normal; white-space: nowrap; float: none }
#MathJax_ZoomOverlay { position: absolute; left: 0; top: 0; z-index: 300; display: inline-block; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background-color: #fff; opacity: 0 }
#MathJax_ZoomFrame { position: relative; display: inline-block; height: 0; width: 0 }
#MathJax_ZoomEventTrap { position: absolute; left: 0; top: 0; z-index: 302; display: inline-block; border: 0; padding: 0; margin: 0; background-color: #fff; opacity: 0 }
.MathJax_Preview { color: #888 }
#MathJax_Message { position: fixed; left: 1px; bottom: 2px; background-color: #E6E6E6; border: 1px solid #959595; margin: 0; padding: 2px 8px; z-index: 102; color: #000; font-size: 80%; width: auto; white-space: nowrap }
#MathJax_MSIE_Frame { position: absolute; top: 0; left: 0; width: 0; z-index: 101; border: 0; margin: 0; padding: 0 }
.MathJax_Error { color: #C00; font-style: italic }
footer { position: fixed; font-size: .8em; text-align: right; bottom: 0; margin-left: -25px; height: 20px; width: 100% }

时间： 2024-08-08 23:49:52

css3 3d 与案例分析

作者：魔洁

1.卡牌反转

html

css

2.立方体

html

css

3.翻牌

html

css

js

4.旋转木马

html

css

js

5.魔方效果

html

css

js

6.多个立方体反转

html

css

js

css3 3d 与案例分析的相关文章

CSS3-3D制作案例分析实战

css3 3d小demo

CSS3 3D transform变换

CSS3 3D轮播主要可以分成这样的三类

一款非常棒的纯CSS3 3D菜单演示及制作教程

写多个物件css3循环动画案例原理

css3 3d旋转图片立方体特效代码

Linux服务器挂死案例分析

一个拓扑，搞定BGP13条路径选择算法 - 案例分析