Skip to content

Instantly share code, notes, and snippets.

@chuck0523
Last active Aug 29, 2015
Embed
What would you like to do?
body {
background-color: #333;
}
.stage {
position: fixed;
top: 10%;
left: 10%;
-webkit-perspective: 1000;
-ms-perspective: 1000;
-o-perspective: 1000;
-moz-perspective: 1000px;
perspective: 1000;
}
.cube {
position: relative;
width: 400px;
height: 300px;
-webkit-transform: translateZ(-150px);
transform: translateZ(-150px);
-webkit-transition: all ease 1s;
transition: all ease 1s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
width: 400px;
height: 300px;
text-align: center;
font-size: 30px;
color: #fff;
line-height: 300px;
transition: all ease 1s;
}
.cubeTop {
background-color: #5aa;
-webkit-transform: translateY(150px) rotateX(-90deg);
transform: translateY(150px) rotateX(-90deg);
}
.cubeBottom {
background-color: #cbcb3c;
-webkit-transform: translateY(-150px) rotateX(90deg);
transform: translateY(-150px) rotateX(90deg);
}
.cubeFront {
background-color: #5a5;
-webkit-transform: translateZ(150px) rotateX(0deg);
transform: translateZ(150px) rotateX(0deg);
}
.cubeBack {
background-color: #a55;
-webkit-transform: translateZ(-150px) rotateX(180deg);
transform: translateZ(-150px) rotateX(180deg);
}
.rotateButton {
position: fixed;
top: 5%;
right: 5%;
width: 200px;
height: 200px;
border: #fff 3px solid;
border-radius: 50%;
background-color: #333;
font-size: 40px;
letter-spacing: 2px;
color: #fff;
cursor: pointer;
transition: all ease 1s;
}
.rotateButton:hover {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
.rotateButton:active {
font-size: 42px;
color:red;
}
.rotateButton:focus {
outline: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment