Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
body {
padding: 5%;
background-color: #333;
height: 3000px; }
.startButton {
position: fixed;
top: 5%;
left: 25%;
width: 50%;
height: 50px;
font-size: 30px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
letter-spacing: 3px;
/*-webkit-transform: translateZ(300px) rotateX(0deg);
transform: translateZ(300px) rotateX(0deg);*/ }
.stage {
position: fixed;
top: 40%;
width: 90%;
-webkit-perspective: 3000;
-ms-perspective: 3000;
-o-perspective: 3000;
-moz-perspective: 3000px;
perspective: 3000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; }
.cube {
position: relative;
float: left;
width: calc(100%/3);
height: 482px;
-webkit-transition: all ease-in-out 1s;
transition: all ease-in-out 1s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 0 20%;
transform-origin: 0 20%; }
.cube div {
position: absolute;
width: 100%;
height: 200px;
text-align: center;
font-size: 30px;
color: #fff;
font-weight: bold;
line-height: 200px;
transition: all ease 1s; }
.cube1 {
background-color: #5a5;
-webkit-transform: translateZ(241px) rotateX(0deg);
transform: translateZ(241px) rotateX(0deg); }
.cube2 {
background-color: #595;
-webkit-transform: translate3D(0, 170px, 170px) rotateX(-45deg);
transform: translate3D(0, 170px, 170px) rotateX(-45deg); }
.cube3 {
background-color: #5aa;
-webkit-transform: translateY(241px) rotateX(-90deg);
transform: translateY(241px) rotateX(-90deg); }
.cube4 {
background-color: #599;
-webkit-transform: translate3D(0, 170px, -170px) rotateX(-135deg);
transform: translate3D(0, 170px, -170px) rotateX(-135deg); }
.cube5 {
top: 0;
background-color: #a55;
-webkit-transform: translateZ(-241px) rotateX(180deg);
transform: translateZ(-241px) rotateX(180deg); }
.cube6 {
top: 0;
background-color: #955;
-webkit-transform: translate3D(0, -170px, -170px) rotateX(135deg);
transform: translate3D(0, -170px, -170px) rotateX(135deg); }
.cube7 {
background-color: #cbcb3c;
-webkit-transform: translateY(-241px) rotateX(90deg);
transform: translateY(-241px) rotateX(90deg); }
.cube8 {
background-color: #78983c;
-webkit-transform: translate3D(0, -170px, 170px) rotateX(45deg);
transform: translate3D(0, -170px, 170px) rotateX(45deg); }
.screenEdge {
position: absolute;
top: -200px;
width: 100%;
height: 300px;
border-top: #333 150px solid;
border-bottom: #333 150px solid;
border-radius: 3px;
-webkit-transform: translateZ(260px);
transform: translateZ(260px); }
@media screen and (max-width: 500px) {
.cube div {
font-size: 16px;
font-weight: normal; }
.startButton {
position: fixed;
left: 45%;
z-index: 999; } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment