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

在线预览   源码下载

实现的代码。

html代码：

  1. <div class="container">
  2. <div class="cube">
  3. <div class="side side1">
  4. </div>
  5. <div class="side side2">
  6. </div>
  7. <div class="side side3">
  8. </div>
  9. <div class="side side4">
  10. </div>
  11. <div class="side side5">
  12. </div>
  13. <div class="side side6">
  14. </div>
  15. </div>
  16. </div>
  17. <div class="container container2">
  18. <div class="cube">
  19. <div class="side side1">
  20. </div>
  21. <div class="side side2">
  22. </div>
  23. <div class="side side3">
  24. </div>
  25. <div class="side side4">
  26. </div>
  27. <div class="side side5">
  28. </div>
  29. <div class="side side6">
  30. </div>
  31. </div>
  32. </div>

css3代码：

  1. body{
  2. height:100vh;
  3. }
  4. .container{
  5. position:absolute;
  6. height:100px;
  7. width:100px;
  8. left:33%;
  9. top:50%;
  10. -webkit-transform: translateX(-50%) translateY(-50%);
  11. transform: translateX(-50%) translateY(-50%);
  12. -webkit-perspective:400px;
  13. perspective:400px;
  14. }
  15. .cube{
  16. height:100px;
  17. widht:100px;
  18. -webkit-transform-origin:50% 50%;
  19. transform-origin:50% 50%;
  20. -webkit-transform-style:preserve-3d;
  21. transform-style:preserve-3d;
  22. -webkit-animation:rotate 4s infinite ease-in-out;
  23. animation:rotate 4s infinite ease-in-out;
  24. }
  25. .side{
  26. position:absolute;
  27. display:block;
  28. height:100px;
  29. width:100px;
  30. }
  31. .side1{
  32. background:#41C3AC;
  33. -webkit-transform:translateZ(100px);
  34. transform:translateZ(100px);
  35. }
  36. .side2{
  37. background:#FF884D;
  38. -webkit-transform:rotateY(90deg) translateZ(100px);
  39. transform:rotateY(90deg) translateZ(100px);
  40. }
  41. .side3{
  42. background:#32526E;
  43. -webkit-transform:rotateY(180deg) translateZ(100px);
  44. transform:rotateY(180deg) translateZ(100px);
  45. }
  46. .side4{
  47. background:#65A2C5;
  48. -webkit-transform:rotateY(-90deg) translateZ(100px);
  49. transform:rotateY(-90deg) translateZ(100px);
  50. }
  51. .side5{
  52. background:#FFCC5C;
  53. -webkit-transform:rotateX(90deg) translateZ(100px);
  54. transform:rotateX(90deg) translateZ(100px);
  55. }
  56. .side6{
  57. background:#FF6B57;
  58. -webkit-transform:rotateX(-90deg) translateZ(100px);
  59. transform:rotateX(-90deg) translateZ(100px);
  60. }
  61. @-webkit-keyframes rotate{
  62. 0%{
  63. -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  64. }
  65. 33.33%{
  66. -webkit-transform:rotateX(360deg) rotateY(0deg)  rotateZ(0deg);
  67. }
  68. 66.66%{
  69. -webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(0deg);
  70. }
  71. 100%{
  72. -webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(360deg);
  73. }
  74. }
  75. @keyframes rotate{
  76. 0%{
  77. transform:rotateX(0deg) rotateY(0deg);
  78. }
  79. 50%{
  80. transform:rotateX(360deg) rotateY(0deg);
  81. }
  82. 100%{
  83. transform:rotateX(360deg) rotateY(360deg);
  84. }
  85. }
  86. a{
  87. font-family:helvetica;
  88. color:#428bca;
  89. text-align:center;
  90. display:block;
  91. }
  92. .container2{
  93. left:66%;
  94. }
  95. .container2 .side{
  96. border-radius:50%;
  97. }

最新文章

  1. 开始ASP.NET MVC5之旅
  2. IDEA之创建不了.java文件解决
  3. UzysAssetsPickerController中文化
  4. R语言putty中直接使用X11（Xming）绘图
  5. JavaScript高级程序设计之window对象
  6. CMake 命令行设定编译环境
  7. Unity 启动画面淡入淡出
  8. asp.net mvc实现rest风格返回json
  9. 【原】eclipse创建maven工程时，如何修改默认JDK版本？
  10. LeetCode &amp; Online Programming Learning Platform
  11. day 42 mycql 查询操作,重点中的重点
  12. Java库中的集合
  13. (网页)javascript小技巧(非常全)
  14. You Don&#39;t Know JS: Scope &amp; Closures (第一章：什么是Scope)
  15. 20155208 《Java程序设计》实验一（Java开发环境的熟悉）实验报告
  16. information that should help you find out what is causing the crash.
  17. redux-thunk中间件源码
  18. WPF：MVVM模式下ViewModel关闭View
  19. TypeError: can&#39;t convert console.log(...) to primitive type
  20. POJ - 2891 中国剩余定理

热门文章

  1. [转] 在 Windows 中让任务栏时间显示&ldquo;秒&rdquo;
  2. 抛弃百度UMEditor，拥抱summernote （解决上传文件又慢又卡的问题）
  3. Mac OS X 10.8.5 安装编译glib
  4. 【Unity】8.3 布局模式（GUILayout）
  5. 深入理解Linux内核－内存寻址
  6. centos 7 忘记密码
  7. su 和 su -
  8. HTML5学习笔记（九）：选择器详解
  9. localtime 和 localtime_r
  10. iOS开发-Tom猫