Html5 and css3 3D scrolling effects, html5css33d scrolling

Html5 and css3 3D scrolling effects, html5css33d scrolling

Today, we bring you a 3D rolling effect implemented by html5 and css3. As follows:

Download Online Preview source code

Implementation code.

Html code:

Html code

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

Html code

1. Body {
2. Height: 100h_h;
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 transform-in-out;
23. Animation: rotate 4S infinite transform-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-keyframes rotate {
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. @ Keyframes rotate {
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. }