Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
83 lines (73 sloc) 1.32 KB
@import "partials/colors";
.cube-parent {
perspective: 50em;
}
.cube {
position: relative;
margin: 8em auto 0;
padding: 0;
width: 16em;
height: 16em;
list-style: none;
transform-style: preserve-3d; // how will children be positioned in 3d space
animation: ani 8s infinite linear;
}
@keyframes ani {
to { transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg); }
}
.face {
box-sizing: border-box;
position: absolute;
top: 50%; left: 50%;
outline: solid 1px;
margin: -8em;
padding: 1.6em;
width: 16em; height: 16em;
opacity: .65;
background: $shape-color;
&:after {
content: "1";
position: absolute;
text-align: center;
color: #fff;
font-size: 5em;
top: 24%;
left: 40%;
}
}
.face:nth-child(1) {
transform: translateZ(8em);
&:after {
content: "1";
}
}
.face:nth-child(2) {
transform: rotateY(180deg) translateZ(8em);
&:after {
content: "6";
}
}
.face:nth-child(3) {
transform: rotateY(90deg) translateZ(8em);
&:after {
content: "3";
}
}
.face:nth-child(4) {
transform: rotateY(-90deg) translateZ(8em);
&:after {
content: "4";
}
}
.face:nth-child(5) {
transform: rotateX(90deg) translateZ(8em);
&:after {
content: "5";
}
}
.face:nth-child(6) {
transform: rotateX(-90deg) translateZ(8em);
&:after {
content: "2";
}
}