css3的三D效果transform实例

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36196162/article/details/79176084

要用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

展开阅读全文

没有更多推荐了,返回首页