Вход Регистрация
* [Mc]Laren

Вращающийся куб с изображениями

  1. Сам код:
  2.  
  3. <style type="text/css">
  4. #holder {
  5. margin:50px auto;
  6. -webkit-perspective:600px;
  7. -moz-perspective:600px;
  8. text-indent: 0px;
  9. }
  10.  
  11. .box {
  12. position: relative;
  13. margin: 0 auto;
  14. height: 200px;
  15. width: 200px;
  16. -webkit-animation: spin 20s infinite linear;
  17. -moz-animation: spin 20s infinite linear;
  18. -webkit-transform-style: preserve-3d;
  19. -moz-transform-style: preserve-3d;
  20. }
  21.  
  22. .box div {
  23. position: absolute;
  24. height: 200px;
  25. width: 200px;
  26. box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
  27. -webkit-animation:rotate 15s infinite linear;
  28. -moz-animation:rotate 15s infinite linear;
  29. }
  30.  
  31. .box div img {width:200px; height:200px;
  32. border-radius:200px;
  33. -webkit-animation:rot 10s infinite linear;
  34. -moz-animation:rot 10s infinite linear;
  35. padding: 0;
  36. }
  37.  
  38. .box div.side1 {
  39. background:rgba( 213, 62, 7, 0.8);
  40. -webkit-transform:translateZ(100px);
  41. -moz-transform:translateZ(100px);
  42. }
  43. .box div.side2 {
  44. background:rgba( 127, 255, 212, 0.8);
  45. -webkit-transform:rotateY(90deg) translateZ(100px);
  46. -moz-transform:rotateY(90deg) translateZ(100px);
  47. }
  48. .box div.side3 {
  49. background:rgba( 255, 219, 88, 0.8);
  50. -webkit-transform:rotateY(180deg) translateZ(100px);
  51. -moz-transform:rotateY(180deg) translateZ(100px);
  52. }
  53. .box div.side4 {
  54. background:rgba( 153, 17, 153, 0.8);
  55. -webkit-transform:rotateY(-90deg) translateZ(100px);
  56. -moz-transform:rotateY(-90deg) translateZ(100px);
  57. }
  58. .box div.side5 {
  59. background:rgba( 0, 71, 171, 0.8);
  60. -webkit-transform:rotateX(-90deg) translateZ(100px) rotate(180deg);
  61. -moz-transform:rotateX(-90deg) translateZ(100px) rotate(180deg);
  62. }
  63. .box div.side6 {
  64. background:rgba( 0, 171, 147, 0.8);
  65. -webkit-transform:rotateX(90deg) translateZ(100px);
  66. -moz-transform:rotateX(90deg) translateZ(100px);
  67. }
  68.  
  69. @-moz-keyframes spin {
  70. 0% {-moz-transform: rotateX(0deg) rotateY(0deg);}
  71. 100% {-moz-transform: rotateX(1080deg) rotateY(360deg);}
  72. }
  73. @-webkit-keyframes spin {
  74. 0% {-webkit-transform: rotateX(0deg) rotateY(0deg);}
  75. 100% {-webkit-transform: rotateX(1080deg) rotateY(360deg);}
  76. }
  77. @-moz-keyframes rot {
  78. 0% {-moz-transform: rotate(0deg);}
  79. 100% {-moz-transform: rotate(360deg);}
  80. }
  81. @-webkit-keyframes rot {
  82. 0% {-webkit-transform: rotate(0deg);}
  83. 100% {-webkit-transform: rotate(360deg);}
  84. }
  85.  
  86. </style>
  87.  
  88. Вывод:
  89.  
  90. <div id="holder">
  91. <div class="box">
  92. <div class="side1"><img src="URL_изо" /></div>
  93. <div class="side2"><img src="URL_изо" /></div>
  94. <div class="side3"><img src="URL_изо" /></div>
  95. <div class="side4"><img src="URL_изо" /></div>
  96. <div class="side5"><img src="URL_изо" /></div>
  97. <div class="side6"><img src="URL_изо" /></div>
  98. </div>
  99. </div>
» Описание: Пример
down/file/1891
» Время добавления: 27 Марта 2015 в 10:58
» Посмотров: 1159
» textarea
» Рейтинг: [+2 | -0]
Комментарии [4]
Онлайн: 9
Реклама