html5和css3实现的3D滚动特效-DBMNG数据库管理与应用网

目录 / 分类

数据库基础

Access

SQLServer

MySQL

SQLite

Oracle

PostgreSQL

移动应用

经验分享

服务器配置

网文摘录

下载中心

软件下载

CUBRID数据库

介绍及使用

验证/二维/条形码

当前位置：首页 > 经验分享 > HTML5

html5和css3实现的3D滚动特效

今天给大家带来一款html5和css3实现的3D滚动特效。效果图如下：

在线预览源码下载

实现的代码。

html代码：

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

css3代码：

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%;
}

via:http://www.w2bc.com/Article/12759

上一篇：CSS3 @font-face 字体图标（css写图标）
下一篇：纯html5实现的时钟