css 3D小结

CSS 3D—-来自小菜鸟的总结

首先你要学习一些基础知识

我们是用transform来实现各种炫酷吊炸天的效果

transform的几个属性我们要记住：

rotate() 顺时针旋转
scale() 缩放
skew() 倾斜
transform()移动

动手实践一下

<style media="screen">
  .box{
     20px;
    height: 20px;
    background-color: red;
    transform: rotate(45deg) scale(2) skew(29deg,30deg) translate(20px,20px);
  }
</style>
<div class="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;
       200px;
      height: 200px;
      margin: 100px auto;
      position: relative; 相对定位
      transition:transform 2s;
    }
    .box:hover{
      transform: rotateY(180deg);
    }
    .box .card{
       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;
     300px;
    margin: 100px auto;
  }
  .wutai{
     300px;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(30deg) rotateY(30deg);
    -webkit-animation:bianhuan 5s infinite linear;
  }
  .page{
    position: absolute;
     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{
   400px;
  perspective:800px;
  margin:150px auto;
  transform:rotateX(-10deg) rotateY(0deg);
}
wutai{
   200px;
  height: 100px;
  transform-style: preserve-3d;
  position: relative;
  transition: all 1s;
}
.page{
   200px;
  height: 100px;
  position: absolute;
}
img{
   200px;
  height: 100px;
}
.box{
   200px;
  background-color: red;
  margin-left: 460px;
}
.box #left{
  float: left;

   50px;
  height: 30px;
  background:#199ef2;
  border: 1px;
  color: white;
}
.box #right{
    float: right;
   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效果最后再加入自己想要实现的效果。