1.scene {
2 width: 10em;
3 justify-content: center;
4 align-items: center;
5}
6
7.cube {
8 color: #ccc;
9 cursor: pointer;
10 font-family: 'Roboto', sans-serif;
11 transition: all 0.85s cubic-bezier(.17,.67,.14,.93);
12 transform-style: preserve-3d;
13 transform-origin: 100% 50%;
14 width: 10em;
15 height: 4em;
16}
17
18.cube:hover {
19 transform: rotateX(-90deg);
20}
21
22.side {
23 box-sizing: border-box;
24 position: absolute;
25 display: inline-block;
26 height: 4em;
27 width: 10em;
28 text-align: center;
29 text-transform: uppercase;
30 padding-top: 1.5em;
31 font-weight: bold;
32}
33
34.top {
35 background: wheat;
36 color: #222229;
37 transform: rotateX(90deg) translate3d(0, 0, 2em);
38 box-shadow: inset 0 0 0 5px #fff;
39}
40
41.front {
42 background: #222229;
43 color: #fff;
44 box-shadow: inset 0 0 0 5px #fff;
45 transform: translate3d(0, 0, 2em);
46}