Ajax Loader
×

Question Block

Based on someone else's work. Trying to create a block to show mystery box.

HTML 
<div class="container">
1
<div class="container">
2
  <div class="block">
3
    <div class="front"><span>?</span></div>
4
    <div class="back"><span></span></div>
5
    <div class="right"><span>?</span></div>
6
    <div class="left"><span>?</span></div>
7
    <div class="top"><span></span></div>
8
    <div class="bottom"><span></span></div>
9
  </div>
10
</div>
 
CSS 
@import url('https://fonts.googleapis.com/css?family=Black+Ops+One');
1
@import url('https://fonts.googleapis.com/css?family=Black+Ops+One');
2
 
3
* {
4
  -webkit-box-sizing: border-box;
5
  -moz-box-sizing: border-box;
6
  box-sizing: border-box;
7
}
8
 
9
html, body {
10
  -webkit-user-select: none;
11
  -moz-user-select: none;
12
  user-select: none;
13
}
14
 
15
body {
16
  font-family: 'Black Ops One', cursive;
17
  font-size: 1.5rem;
18
  background: #f5f5f5;
19
  color: #acacac;
20
  text-align: center;
21
  margin: 0;
22
}
23
 
24
.container {
25
  position: absolute;
26
  margin: 0 auto;
27
  top: 50%;
28
  left: 50%;
29
  width: 200px;
30
  height: 190px;
31
  -webkit-perspective: 1000px;
32
  -moz-perspective: 1000px;
33
  perspective: 1000px;
34
  -webkit-transform: translate(-50%,-50%);
35
  -moz-transform: translate(-50%,-50%);
36
  transform: translate(-50%,-50%);
37
}
38
 
39
.block {
40
  position: absolute;
41
  -webkit-transform-style: preserve-3d;
42
  -moz-transform-style: preserve-3d;
43
  transform-style: preserve-3d;
44
  -webkit-transform: rotateX(-25deg) rotateY(-30deg) translateZ(-100px);
45
  -moz-transform: rotateX(-25deg) rotateY(-30deg) translateZ(-100px);
46
  transform: rotateX(-25deg) rotateY(-30deg) translateZ(-100px);
47
  -webkit-transform-origin: center center -100px;
48
  -moz-transform-origin: center center -100px;
49
  transform-origin: center center -100px;
50
}
51
 
52
.block {
53
  width: 100%;
54
  height: 100%;
55
}
56
 
57
.block > div {
58
  position: absolute;
59
  width: 200px;
60
  height: 190px;
61
}
62
 
63
.block span {
64
  position: absolute;
65
  top: 65%;
66
  left: 55%;
67
  color: #fff;
68
  font-size: 12rem;
69
  text-align: center;
70
  -webkit-transform: translate(-50%, -50%);
71
  -moz-transform: scale(1.1,1.2) translate(-50%, -50%);
72
  transform: scale(1.1,1.2) translate(-50%, -50%);
73
  text-shadow: 2px 2px 1px rgba(250,156,72,0.35);
74
}
75
 
76
.block .front {
77
  -webkit-transform: rotateY(0deg) translateZ(100px);
78
  -moz-transform: rotateY(0deg) translateZ(100px);
79
  transform: rotateY(0deg) translateZ(100px);
80
  background: #ffd436;
81
  -webkit-border-radius: 20px 0 20px 20px;
82
  -moz-border-radius: 20px 0 20px 20px;
83
  border-radius: 20px 0 20px 20px;
84
}
85
 
86
.block .front:before,
87
.block .right:before,
88
.block .front:after,
89
.block .right:after,
90
.block .front span:before,
91
.block .right span:before,
92
.block .front span:after,
93
.block .right span:after {
94
  content: '';
95
  position: absolute;
96
  width: 15px;
97
  height: 15px;
98
  background: #fa9c48;
99
  -webkit-border-radius: 100%;
100
  -moz-border-radius: 100%;
101
  border-radius: 100%;
102
}
103
 
104
.block .front:before,
105
.block .right:before {
106
  top: 10px;
107
  left: 10px;
108
}
109
 
110
.block .front:after,
111
.block .right:after {
112
  top: 10px;
113
  right: 5px;
114
}
115
 
116
.block .front span:before,
117
.block .right span:before {
118
  left: -20px;
119
}
120
 
121
.block .front span:before,
122
.block .right span:before,
123
.block .front span:after,
124
.block .right span:after {
125
  top: 173px;
126
}
127
 
128
.block .bottom,
129
.block .back,
130
.block .left {
131
    background: #ffd436;
132
}
133
 
134
.block .top,
135
.block .bottom,
136
.block .back,
137
.block .left,
138
.block .right {
139
  -webkit-border-radius: 20px;
140
  -moz-border-radius: 20px;
141
  border-radius: 20px;
142
}
143
 
144
.block .back {
145
  -webkit-transform: rotateX(180deg) translateZ(100px);
146
  -moz-transform: rotateX(180deg) translateZ(100px);
147
  transform: rotateX(180deg) translateZ(100px);
148
}
149
 
150
.block .left {
151
  -webkit-transform: rotateY(-90deg) translateZ(100px);
152
  -moz-transform: rotateY(-90deg) translateZ(100px);
153
  transform: rotateY(-90deg) translateZ(100px);
154
}
155
.block .right {
156
  background: #feba41;
157
  -webkit-transform: rotateY(90deg) translateZ(100px);
158
  -moz-transform: rotateY(90deg) translateZ(100px);
159
  transform: rotateY(90deg) translateZ(100px);
160
}
161
 
162
.block .right:before,
163
.block .right:after,
164
.block .right span:before,
165
.block .right span:after {
166
  background: #e4984f;
167
}
168
 
169
.block .right span {
170
  color: #fcddaa;
171
}
172
 
173
.block .top {
174
  background: #ffe971;
175
  -webkit-transform: rotateX(90deg) translateZ(100px);
176
  -moz-transform: rotateX(90deg) translateZ(100px);
177
  transform: rotateX(90deg) translateZ(100px);
178
}
179
 
180
.block .bottom {
181
  -webkit-transform: rotateX(-90deg) translateZ(100px);
182
  -moz-transform: rotateX(-90deg) translateZ(100px);
183
  transform: rotateX(-90deg) translateZ(100px);
184
}
185
 
186
.block .bottom:after {
187
  content: '';
188
  position: absolute;
189
  left: 0;
190
  width: 100%;
191
  height: 100%;
192
  -webkit-border-radius: inherit;
193
  -moz-border-radius: inherit;
194
  border-radius: inherit;
195
  -webkit-box-shadow: 5px 0 50px 0 rgba(141,168,161,0.68);
196
  -moz-box-shadow: 5px 0 50px 0 rgba(141,168,161,0.68);
197
  box-shadow: 5px 0 50px 0 rgba(141,168,161,0.68);
198
}
199
 
200
.block .top {
201
  top: 8px;
202
}
203
 
204
.block .back {
205
  top: 5px;
206
}
207
 
208
.block .left,
209
.block .right {
210
  top: 4px;
211
}
 

Question Block

CSSDeck G+