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

2021-07-25 12:39:18

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

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. }
上一篇：UITableView 自定义多选


下一篇：day 4 Socket 和 NIO Netty