利用纯css3实现绚丽的3D场景技术

案例效果如图：
css3-3d
github地址

https://github.com/renjianfeng/css3-3D

css3场景技术是利用css3的3D变形和透视制作的基于css3的3d场景效果；

1.将浏览器的css3渲染模式改为3D

 -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

2.设置透视距离

在3d世界中，离你近的东西看起来比较大，离你远的东西看起来比较小，这样我们在才能看到一个比较立体的世界。设置的代码入下：

 -moz-perspective: 900px;
   perspective: 900;
   -webkit-perspective: 900; /* Safari 和 Chrome */

注意这里除了头文件兼容，还要注意，在火狐和ie下面一定要注意后面的单位

3.旋转和移动

css3提供了transform的属性支持3d场景下面的位移和旋转

包含两个属性 rotate（旋转） translate（位移） 3D场景中坐标由原来的二维坐标（x,y）变更为三维坐标，即(x,y,z)； 所以以上两个属性分别支持3方向的位移和旋转； 如

  transform: rotateX(20deg) rotateY(15deg) rotateZ(0deg) translateX(200px) translateY(300px) translateZ(300px);

4.动画
css3提供了两种动画模式，均是参考传统的交互动画，即animation（逐帧动画）和transtion（渐变动画），两种的使用场景参考如下；

anmimation动画


  .map_tu
        {
            animation: dh_nav 15s infinite linear ;
            -webkit-animation: dh_nav 15s infinite linear ;
        }
        @keyframes dh_nav {
            0% {
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(300px) translateZ(0px);
                -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(300px) translateZ(0px);
            }
            50% {
                transform: rotateX(0deg) rotateY(180deg) rotateZ(60deg) translateX(0px) translateY(900px) translateZ(3000px);
                -webkit-transform: rotateX(0deg) rotateY(180deg) rotateZ(60deg) translateX(0px) translateY(900px) translateZ(3000px);
            }
            100% {
                transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg) translateX(0px) translateY(300px) translateZ(0px);
                -webkit-transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg) translateX(0px) translateY(300px) translateZ(0px);
            }
        }

transtion动画

  .map_tu
        {
          -webkit-transition: 0.5s;
            transition: 0.5s;
            background:red;
        }
  .map_tu:hover
        {
          -webkit-transition: 0.5s;
          transition: 0.5s;
          background:green;
        }

当然css3的动画还有很多的效果，在这里我只是稍微列举一下，方便大家理解上面的代码，如果大家有兴趣，可以深入学习！

    共有 0 条评论

    Top
    ×