Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
151 lines (131 sloc) 2.58 KB
@keyframes spinXY {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(720deg) rotateY(360deg);
}
}
.hexagon-container {
padding-top: 80px;
width: 100%;
height: 100%;
position: relative;
perspective: 1000px;
perspective-origin: 50% 50%;
}
.hexagon-container > div {
width: 200px;
height: 200px;
margin: auto;
position: relative;
transform-style: preserve-3d;
animation: spinXY 8s infinite linear;
}
$hexagon-dimensions: 200px;
@mixin pos-els {
position: absolute;
}
.hexagon-wrapper {
width: $hexagon-dimensions;
height: $hexagon-dimensions;
@include pos-els;
}
.hexagon {
height: 100%;
width: 57.735%;
display: inline-block;
&:before {
position: absolute;
top: 0;
left: 50%;
background-color: inherit;
height: inherit;
width: 100%;
content: '';
transform: rotate(60deg);
transform-origin: 25% 25%;
}
&:after {
position: absolute;
top: 0;
left: 50%;
background-color: inherit;
height: inherit;
width: 100%;
content: '';
transform: rotate(-60deg);
transform-origin:25% 75%;
}
}
.hexagon-wrapper.front .hexagon {
background-color: #D93;
transform: translateZ(0em) rotateX(90deg);
}
.hexagon-wrapper.back .hexagon {
background-color: #6C6;
transform: translateY(150px) translateZ(0em) rotateX(90deg);
}
.hexagon-container .side {
box-sizing: border-box;
width: 116px;
height: 150px;
background: #ccaf5a;
@include pos-els;
opacity: .5;
z-index: 1;
&:after {
content: "1";
position: absolute;
text-align: center;
color: #fff;
font-size: 5em;
top: 20%;
left: 30%;
}
}
@mixin position-side ($rotate-y) {
transform: rotateY($rotate-y) translateX(0px) translateY(100px) translateZ(99px);
}
.hexagon-container .side:nth-child(2) {
@include position-side(0deg);
background-color: #e04545;
&:after {
content: "1";
}
}
.hexagon-container .side:nth-child(3) {
@include position-side(60deg);
background-color: #ccaf5a;
&:after {
content: "2";
}
}
.hexagon-container .side:nth-child(4) {
@include position-side(120deg);
background-color: #800000;
&:after {
content: "3";
}
}
.hexagon-container .side:nth-child(5) {
@include position-side(180deg);
background-color: #2E86C1;
&:after {
content: "4";
}
}
.hexagon-container .side:nth-child(6) {
@include position-side(240deg);
background-color: #AAB7B8;
&:after {
content: "5";
}
}
.hexagon-container .side:nth-child(7) {
@include position-side(300deg);
background-color: #0B5345;
&:after {
content: "6";
}
}