css3的三D效果transform实例

要用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://www.lightconmos.com/test/#/test3这里动画设定是视角的左右转换，不同视角效果不一样。

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