要用CSS3實現3D效果，先看個圖

perspective設定景深，也就是Z軸的距離。

perspective-origin:設定視角，不同視角看到同一個立體是不同的表現。

設定好這些，就可以構建你想要的，立體圖形，在構建前，構建前生成容器，要讓容器內元素也保持3D效果，就要在樣式新增transform-style: preserve-3d;

定義容器內元素位置，用到transform，tranform屬性很多不多說了，可以查下網站有詳細介紹，這裡主要說兩個屬性：第一rotateZ(val),以Z軸為中心旋轉，val是角度單位deg,例如：rotateZ(90deg),以z軸為中心，旋轉90度。rotateY(),rotateX()也是可疑的就不多說了。第二個，translateZ(val)偏移，這個是沿著Z軸的偏移，val這裡面是距離，比如translateZ(100px)沿Z軸偏移100畫素，當然這裡要設好景深,景深：偏移量，景深一定，偏移量越大效果越明顯，感覺距離很遠，影象拉伸的很厲害。
 

下面是程式碼例項：

<div class="bgl">
    <div class="titlea">
      <div>hello</div>
      <div>world</div>
      <div></div>
    </div>
  </div>

.bgl{
    font-size: 32px;
    color: green;
    background-color: black;
    width: 100%;
    height: 100vh;
    perspective: 1000px;
    perspective-origin: 53% 40%;
    animation: moveOver 10s linear infinite;
  }
  .titlea{
    width: 500px;
    height: 500px;
    background-color: #4cbbb4;
    position: absolute;
    left: 30%;
    top: 30%;
  }
  .titlea>div{
    position: absolute;
    width: 200px;
    height: 200px;
    left: 70%;
    top: 0;
    font-size: 50px;
    line-height: 200px;
    text-align: center;
    opacity: 0.5;
    transform-style: preserve-3d;
  }
  .titlea>div:nth-child(1){
    background-color: red;
    /*animation: move 10s linear infinite;*/
    transform: translateZ(-500px);
  }
  .titlea>div:nth-child(2){
    background-color: cornflowerblue;
    transform: rotateX(10deg);
    /*animation: moveDown 10s linear infinite;*/
  }
  .titlea>div:nth-child(3){
    background-color: white;
    width: 500px;
    height: 10px;
    transform: rotateY(90deg) translateX(250px) translateZ(-150px) translateY(100px);
  }
  @keyframes move { /*設定動畫關鍵幀*/
    0% {
      transform: translateZ(-5000px);
    }
    100% {
      transform: translateZ(1000px);
    }
  }
  @keyframes moveDown { /*設定動畫關鍵幀*/
    0%, 100%{
      top:-60%;
      transform: rotateX(70deg);
    }
    50% {
      top: 60%;
      transform: rotateX(-70deg);
    }
  }
  @keyframes moveOver { /*設定動畫關鍵幀*/
    0%, 100%{
      perspective-origin: 53% 40%;
    }
    25%{
      perspective-origin: 0% 40%;
    }
    50% {
      perspective-origin: 50% 40%;
    }
    75% {
      perspective-origin: 100% 40%;
    }
  }
 

參考：http://blog.csdn.net/q1056843325/article/details/53287833