html5+css3实现3D滚动特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5+css3实现3D滚动特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <title>html5+css3ʵ��3D������Ч</title>
    <style>
  body{
  height:100vh;
}
.container{
  position:absolute;
  height:100px;
  width:100px;
  left:33%;
  top:50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-perspective:400px;
          perspective:400px;
}
.cube{
  height:100px;
  widht:100px;
  -webkit-transform-origin:50% 50%;
          transform-origin:50% 50%;
  -webkit-transform-style:preserve-3d;
          transform-style:preserve-3d;
  -webkit-animation:rotate 4s infinite ease-in-out;
          animation:rotate 4s infinite ease-in-out;

}
.side{
  position:absolute;
  display:block;
  height:100px;
  width:100px;
}
.side1{
  background:#41C3AC;
  -webkit-transform:translateZ(100px);
          transform:translateZ(100px);
}
.side2{
  background:#FF884D;
  -webkit-transform:rotateY(90deg) translateZ(100px);
          transform:rotateY(90deg) translateZ(100px);
}
.side3{
  background:#32526E;
  -webkit-transform:rotateY(180deg) translateZ(100px);
          transform:rotateY(180deg) translateZ(100px);
}
.side4{
  background:#65A2C5;
  -webkit-transform:rotateY(-90deg) translateZ(100px);
          transform:rotateY(-90deg) translateZ(100px);
}
.side5{
  background:#FFCC5C;
  -webkit-transform:rotateX(90deg) translateZ(100px);
          transform:rotateX(90deg) translateZ(100px);
}
.side6{
  background:#FF6B57;
  -webkit-transform:rotateX(-90deg) translateZ(100px);
          transform:rotateX(-90deg) translateZ(100px);
}

@-webkit-keyframes rotate{
  0%{
    -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  33.33%{
     -webkit-transform:rotateX(360deg) rotateY(0deg)  rotateZ(0deg);    
  }
  66.66%{
     -webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(0deg);
  }
  100%{
     -webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(360deg);
  }
}
@keyframes rotate{
  0%{
    transform:rotateX(0deg) rotateY(0deg);
  }
  50%{
    transform:rotateX(360deg) rotateY(0deg);    
  }
  100%{
    transform:rotateX(360deg) rotateY(360deg);
  }
}
a{
  font-family:helvetica;
  color:#428bca;
  text-align:center;
  display:block;
}

.container2{
  left:66%;
}
.container2 .side{
  border-radius:50%;
}
  </style>
</head>
<body>
    <div class="container">
        <div class="cube">
            <div class="side side1">
            </div>
            <div class="side side2">
            </div>
            <div class="side side3">
            </div>
            <div class="side side4">
            </div>
            <div class="side side5">
            </div>
            <div class="side side6">
            </div>
        </div>
    </div>
    <div class="container container2">
        <div class="cube">
            <div class="side side1">
            </div>
            <div class="side side2">
            </div>
            <div class="side side3">
            </div>
            <div class="side side4">
            </div>
            <div class="side side5">
            </div>
            <div class="side side6">
            </div>
        </div>
    </div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)