116 lines
1.6 KiB
CSS
116 lines
1.6 KiB
CSS
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background: radial-gradient(#777, #333);
|
|
overflow: hidden;
|
|
}
|
|
|
|
#viewbox {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 300px;
|
|
height: 300px;
|
|
margin: -150px 0 0 -150px;
|
|
perspective: 800px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.box,
|
|
.cube,
|
|
.face,
|
|
.face-wrapper,
|
|
.cr {
|
|
position: absolute;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.cube {
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
transform-origin: 50%;
|
|
}
|
|
.cube .face {
|
|
overflow: hidden;
|
|
transform-origin: 0 0;
|
|
background-size: 100% 100% !important;
|
|
background-position: center;
|
|
}
|
|
.cube .face .face-view {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.cube .ft,
|
|
.cube .bk {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.cube .bk {
|
|
left: 100%;
|
|
}
|
|
.cube .rt {
|
|
transform: rotateY(-90deg) translateX(-50%);
|
|
}
|
|
.cube .lt {
|
|
transform: rotateY(90deg) translateX(-50%);
|
|
}
|
|
.cube .tp {
|
|
transform: rotateX(90deg) translateY(-50%);
|
|
}
|
|
.cube .bm {
|
|
transform: rotateX(-90deg) translateY(-50%);
|
|
}
|
|
.cube .lt {
|
|
left: 100%;
|
|
}
|
|
.cube .bm {
|
|
top: 100%;
|
|
}
|
|
|
|
.cube {
|
|
width: 160px;
|
|
height: 160px;
|
|
margin: -80px 0 0 -80px;
|
|
}
|
|
.cube .ft {
|
|
transform: translateZ(80px);
|
|
}
|
|
.cube .bk {
|
|
transform: translateZ(-80px) rotateY(180deg);
|
|
}
|
|
.cube .rt,
|
|
.cube .lt {
|
|
width: 160px;
|
|
height: 160px;
|
|
}
|
|
.cube .tp,
|
|
.cube .bm {
|
|
width: 160px;
|
|
height: 160px;
|
|
}
|
|
|
|
.cube .face {
|
|
background-color: #cccccc;
|
|
border: none;
|
|
}
|
|
|
|
svg#cubie {
|
|
margin: 30px 20px 20px;
|
|
}
|
|
svg#cubie .sadface.hidden,
|
|
svg#cubie .happyface.hidden {
|
|
visibility: hidden;
|
|
}
|