1.cbx {
2 -webkit-perspective: 20;
3 perspective: 20;
4 position: absolute;
5 top: 50%;
6 left: 50%;
7 margin: -12px;
8 border: 2px solid #e8e8eb;
9 background: #e8e8eb;
10 border-radius: 4px;
11 transform: translate3d(0, 0, 0);
12 cursor: pointer;
13 transition: all 0.3s ease;
14}
15
16.cbx:hover {
17 border-color: #0b76ef;
18}
19
20.flip {
21 display: block;
22 transition: all 0.4s ease;
23 transform-style: preserve-3d;
24 position: relative;
25 width: 20px;
26 height: 20px;
27}
28
29#cbx {
30 display: none;
31}
32
33#cbx:checked + .cbx {
34 border-color: #0b76ef;
35}
36
37#cbx:checked + .flip {
38 transform: rotateY(180deg);
39}
40
41.front,
42.back {
43 backface-visibility: hidden;
44 position: absolute;
45 top: 0;
46 left: 0;
47 width: 20px;
48 height: 20px;
49 border-radius: 2px;
50}
51
52.front {
53 background: #fff;
54 z-index: 1;
55}
56
57.back {
58 transform: rotateY(180deg);
59 background: #0b76ef;
60 text-align: center;
61 color: #fff;
62 line-height: 20px;
63 box-shadow: 0 0 0 1px #0b76ef;
64}
65
66.back svg {
67 margin-top: 3px;
68 fill: none;
69}
70
71.back svg path {
72 stroke: #fff;
73 stroke-width: 2.5;
74 stroke-linecap: round;
75 stroke-linejoin: round;
76}
77
78
79