Ajax Loader
HTML 
 
1
 
2
<!-- CONTROLS -->
3
    
4
    <input type="radio" checked id="radio-front" name="select-face"/>  
5
    <input type="radio" id="radio-left" name="select-face"/>
6
    <input type="radio" id="radio-right" name="select-face"/>
7
    <input type="radio" id="radio-top" name="select-face"/>
8
    <input type="radio" id="radio-bottom" name="select-face"/>
9
    <input type="radio" id="radio-back" name="select-face"/>
10
 
11
<div class="separator"></div>
12
 
13
 
14
<div class="space3d">
15
      
16
  
17
    <div class="_3dbox">
18
      <div class="_3dface _3dface--front"></div>
19
      <div class="_3dface _3dface--top"></div>
20
      <div class="_3dface _3dface--bottom"></div>
21
      <div class="_3dface _3dface--left"></div>
22
      <div class="_3dface _3dface--right"></div>
23
      <div class="_3dface _3dface--back"></div>
24
    </div>
25
  
26
</div>
27
 
28
<div class="separator"></div>
29
<br><br>
30
 
31
<a class="twitter" target="_blank" href="https://twitter.com/chinchang457">@chinchang457</a>
32
 
33
<div>Image credits: <a target="_blank" href="http://da-art-work.blogspot.in/">Parag Gour (my brother)</a></div>
34
 
 
CSS 
// toggle the cube dimensions here.
1
// toggle the cube dimensions here.
2
$cubeWidth: 300px;
3
$cubeHeight: 300px;
4
$cubeDepth: $cubeHeight;
5
 
6
body {
7
  color: #333;
8
  padding: 20px;
9
  text-align: center;
10
  font-family: Arial;
11
}
12
 
13
.separator {
14
  margin-top: 40px;
15
}
16
17
.twitter {
18
  color: #FFF;
19
  text-decoration: none;
20
  border-radius: 4px;
21
  background: #00ACED;
22
  display: inline-block;
23
  padding: 10px 8px;
24
  margin-bottom: 15px;
25
  font-weight: bold;
26
}
27
 
28
/* 3D Cube */
29
.space3d {
30
  perspective: 1000px;
31
  width: $cubeWidth;
32
  height: $cubeHeight;
33
  text-align: center;
34
  display: inline-block;
35
}
36
 
37
._3dbox {
38
  display: inline-block;
39
  transition: all 0.85s cubic-bezier(0.175,0.885,0.320,1.275);
40
 
41
  text-align: center;
42
  position: relative;
43
  width: 100%;
44
  height: 100%;
45
  transform-style: preserve-3d;
46
  transform: rotateX(-15deg) rotateY(15deg);
47
}
48
 
49
._3dface {
50
  overflow: hidden;
51
  position: absolute;
52
53
  border: 1px solid #888;
54
  background: #FFF;
55
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1),
56
 0 0 50px rgba(0, 0, 0, 0.3);
57
  color: #333;
58
  line-height: $cubeWidth;
59
  opacity: 0.8;
60
}
61
 
62
 
63
._3dface--front {
64
  width: $cubeWidth;
65
  height: $cubeHeight;
66
  transform: translate3d(0, 0, $cubeDepth / 2);
67
}
68
69
._3dface--top {
70
  width: $cubeWidth;
71
  height: $cubeDepth;
72
  transform: rotateX(90deg) translate3d(0, 0, $cubeHeight / 2);
73
}
74
 
75
._3dface--bottom {
76
  width: $cubeWidth;
77
  height: $cubeDepth;
78
  transform: rotateX(-90deg) translate3d(0, 0, $cubeHeight / 2);
79
}
80
 
81
._3dface--left {
82
  width: $cubeDepth;
83
  height: $cubeHeight;
84
  left: 50%;
85
  margin-left: -$cubeDepth / 2;
86
  transform: rotateY(-90deg) translate3d(0, 0, $cubeWidth / 2);
87
}
88
 
89
 
90
._3dface--right {
91
  width: $cubeDepth;
92
  height: $cubeHeight;
93
  left: 50%;
94
  margin-left: -$cubeDepth / 2;
95
  transform: rotateY(90deg) translate3d(0, 0, $cubeWidth / 2);
96
}
97
 
98
 
99
._3dface--back {
100
  width: $cubeWidth;
101
  height: $cubeHeight;
102
  transform: rotateY(180deg) translate3d(0, 0, $cubeDepth / 2);
103
}
104
 
105
#radio-left:checked ~ .space3d ._3dbox {
106
  transform: rotateY(90deg);
107
}
108
109
#radio-right:checked ~ .space3d ._3dbox {
110
  transform: rotateY(-90deg);
111
}
112
113
#radio-bottom:checked ~ .space3d ._3dbox {
114
  transform: rotateX(90deg);
115
}
116
 
117
#radio-top:checked ~ .space3d ._3dbox {
118
  transform: rotateX(-90deg);
119
}
120
121
#radio-back:checked ~ .space3d ._3dbox {
122
  transform: rotateY(180deg);
123
}
124
 
125
  // Apply backgrounds
126
  ._3dface--front {
127
  background: url(http://2.bp.blogspot.com/-JxKfUObT4L8/UYYaRhRNJmI/AAAAAAAAAUY/243IlIOKj2c/s320/brahama.jpg);
128
  background-size: 100%;
129
}
130
131
  ._3dface--left {
132
  background: url(http://4.bp.blogspot.com/-HGFGdCGFTkw/UXVq6PNmS4I/AAAAAAAAAUE/hBNmVCOVlu4/s400/durga+wm.jpg);
133
  background-size: auto 100%;
134
}
135
136
   ._3dface--right {
137
  background: url(http://2.bp.blogspot.com/-yrnBD8wJ-g0/UNRtPF8pR7I/AAAAAAAAATE/YSpLvqTNyoQ/s320/A+P+J+abdul+kalam_+swm+.jpg);
138
  background-size: auto 100%;
139
}
140
141
   ._3dface--top {
142
  background: url(http://3.bp.blogspot.com/-mySu8dy4ux4/ULiVKS4YBbI/AAAAAAAAAR0/vBMi_4dAPDE/s400/rajiv+dixit+s.jpg);
143
  background-size: auto 100%;
144
}
145
146
   ._3dface--bottom {
147
  background: url(http://2.bp.blogspot.com/-B9QWFtc9bVY/UHFs7y9GqkI/AAAAAAAAARI/YLDkoHYr3g4/s400/Gau+wm.jpg);
148
  background-size: auto 100%;
149
}
150
151
  ._3dface--back {
152
  background: url(http://3.bp.blogspot.com/-ofufG97PpiU/UBzXu-1AisI/AAAAAAAAAP0/iDnhOh-vrb8/s400/shiv+ji.jpg);
153
  background-size: auto 100%;
154
}
155
 

3D cube image gallery

CSSDeck G+