一款如何利用html5和css3如何实现的3D滚动特效的好代码教程

网络
四个拥有：无论你有多弱或多强，一定要拥有真正爱你的人，拥有知心的朋友，拥有向上的事业，拥有温暖的住所。

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <divclass="container">
  2. <divclass="cube">
  3. <divclass="sideside1">
  4. </div>
  5. <divclass="sideside2">
  6. </div>
  7. <divclass="sideside3">
  8. </div>
  9. <divclass="sideside4">
  10. </div>
  11. <divclass="sideside5">
  12. </div>
  13. <divclass="sideside6">
  14. </div>
  15. </div>
  16. </div>
  17. <divclass="containercontainer2">
  18. <divclass="cube">
  19. <divclass="sideside1">
  20. </div>
  21. <divclass="sideside2">
  22. </div>
  23. <divclass="sideside3">
  24. </div>
  25. <divclass="sideside4">
  26. </div>
  27. <divclass="sideside5">
  28. </div>
  29. <divclass="sideside6">
  30. </div>
  31. </div>
  32. </div>

　　css3代码：

CSS Code复制内容到剪贴板
  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:rotate4sinfiniteease-in-out;
  23. animation:rotate4sinfiniteease-in-out;
  25. }
  26. .side{
  27. position:absolute;
  28. display:block;
  29. height:100px;
  30. width:100px;
  31. }
  32. .side1{
  33. background:#41C3AC;
  34. -webkit-transform:translateZ(100px);
  35. transform:translateZ(100px);
  36. }
  37. .side2{
  38. background:#FF884D;
  39. -webkit-transform:rotateY(90deg)translateZ(100px);
  40. transform:rotateY(90deg)translateZ(100px);
  41. }
  42. .side3{
  43. background:#32526E;
  44. -webkit-transform:rotateY(180deg)translateZ(100px);
  45. transform:rotateY(180deg)translateZ(100px);
  46. }
  47. .side4{
  48. background:#65A2C5;
  49. -webkit-transform:rotateY(-90deg)translateZ(100px);
  50. transform:rotateY(-90deg)translateZ(100px);
  51. }
  52. .side5{
  53. background:#FFCC5C;
  54. -webkit-transform:rotateX(90deg)translateZ(100px);
  55. transform:rotateX(90deg)translateZ(100px);
  56. }
  57. .side6{
  58. background:#FF6B57;
  59. -webkit-transform:rotateX(-90deg)translateZ(100px);
  60. transform:rotateX(-90deg)translateZ(100px);
  61. }
  63. @-webkit-keyframesrotate{
  64. 0%{
  65. -webkit-transform:rotateX(0deg)rotateY(0deg)rotateZ(0deg);
  66. }
  67. 33.33%{
  68. -webkit-transform:rotateX(360deg)rotateY(0deg)rotateZ(0deg);
  69. }
  70. 66.66%{
  71. -webkit-transform:rotateX(360deg)rotateY(360deg)rotateZ(0deg);
  72. }
  73. 100%{
  74. -webkit-transform:rotateX(360deg)rotateY(360deg)rotateZ(360deg);
  75. }
  76. }
  77. @keyframesrotate{
  78. 0%{
  79. transform:rotateX(0deg)rotateY(0deg);
  80. }
  81. 50%{
  82. transform:rotateX(360deg)rotateY(0deg);
  83. }
  84. 100%{
  85. transform:rotateX(360deg)rotateY(360deg);
  86. }
  87. }
  88. a{
  89. font-family:helvetica;
  90. color:#428bca;
  91. text-align:center;
  92. display:block;
  93. }
  95. .container2{
  96. left:66%;
  97. }
  98. .container2.side{
  99. border-radius:50%;
  100. }

以上就是一款如何利用html5和css3如何实现的3D滚动特效的好代码教程。春阳灿灿，夏山如碧，秋蜩抱朴，冬日烈烈，皆愿与君长相随。更多关于一款如何利用html5和css3如何实现的3D滚动特效的好代码教程请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例