Skip to content

Instantly share code, notes, and snippets.

Created Jun 30, 2016
Embed
What would you like to do?
JS Bin // source https://jsbin.com/zetolez
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
@-webkit-keyframes slowspin {
from {
-webkit-transform: rotateX(-33.5deg) rotateY(45deg);
transform: rotateX(-33.5deg) rotateY(45deg)
}
50% {
-webkit-transform: rotateX(-33.5deg) rotateY(225deg);
transform: rotateX(-33.5deg) rotateY(225deg)
}
100% {
-webkit-transform: rotateX(-33.5deg) rotateY(405deg);
transform: rotateX(-33.5deg) rotateY(405deg)
}
}
@keyframes slowspin {
0% {
-webkit-transform: rotateX(-33.5deg) rotateY(45deg);
transform: rotateX(-33.5deg) rotateY(45deg)
}
50% {
-webkit-transform: rotateX(-33.5deg) rotateY(225deg);
transform: rotateX(-33.5deg) rotateY(225deg)
}
100% {
-webkit-transform: rotateX(-33.5deg) rotateY(405deg);
transform: rotateX(-33.5deg) rotateY(405deg)
}
}
.cube {
width: 100%;
height: 100%;
padding: 0;
margin: -50px 0;
-webkit-transform-origin: 50px 50px;
transform-origin: 50px 50px;
-webkit-transform: rotateX(-33.5deg) rotateY(45deg);
transform: rotateX(-33.5deg) rotateY(45deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
margin: -50px 0 0 -50px;
-webkit-animation: slowspin 3s ease-in-out infinite 1s;
animation: slowspin 3s ease-in-out infinite 1s;
top: 50%;
left: 50%
}
.cube,
.cube li {
position: absolute;
display: block
}
.cube li {
width: 75pt;
height: 75pt;
transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out
}
.cube li .t, .cube li .l2 {
position: absolute;
background: rgba(223,105,55,1);
}
.cube li .p {
position: absolute;
}
.cube li .l, .cube li .t2 {
position: absolute;
background: rgba(250,167,27,1);
}
.cube li .p-up {
width: 100%;
height: calc(100%/3);
background: rgba(223,105,55,1);
}
.cube li .p-down {
top: calc(100%/3*2 + 1px);
width: 100%;
height: calc(100%/3);
background: rgba(250,167,27,1);
}
.cube li .t-top {
width: 100%;
height: calc(100%/3);
}
.cube li .t2.t-top {
width: 100%;
height: calc(100%/3);
top: calc(100%/3*2 + 1px);
}
.cube li .t-down {
left: calc(100%/3);
width: calc(100%/3);
height: 100%;
}
.cube li .t2.t-down {
left: calc(100%/3);
width: calc(100%/3);
height: 100%;
}
.cube li .l-left {
width: calc(100%/3);
height: 100%;
}
.cube li .l-bottom {
top: calc(100%/3*2 + 1px);
width: 100%;
height: calc(100%/3);
}
.cube .back,
.cube .front,
.cube .left,
.cube .right,
.cube .top {
/* background: radial-gradient(transparent 30%, rgba(16, 47, 91, .2) 100%) */
background: rgba(255,255,255,0.8);
}
.cube li:after {
content: "";
display: block;
position: absolute;
width: 75pt;
height: 75pt;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out
}
.cube .front {
-webkit-transform: translateZ(50px);
transform: translateZ(50px)
}
.cube .back {
-webkit-transform: rotateX(-180deg) translateZ(50px);
transform: rotateX(-180deg) translateZ(50px)
}
.cube .right {
-webkit-transform: rotateY(90deg) translateZ(50px);
transform: rotateY(90deg) translateZ(50px)
}
.cube .left {
-webkit-transform: rotateY(-90deg) translateZ(50px);
transform: rotateY(-90deg) translateZ(50px)
}
.cube .top {
-webkit-transform: rotateX(90deg) translateZ(50px);
transform: rotateX(90deg) translateZ(50px)
}
.cube .top:after {
/* background-color: rgba(255, 255, 255, .5) */
}
.cube .bottom {
-webkit-transform: rotateX(-90deg) translateZ(50px);
transform: rotateX(-90deg) translateZ(50px)
}
.cube .floor:after {
display: none
}
.cube .floor {
/* box-shadow: -300px 0 50px rgba(0, 0, 0, .3);
-webkit-backface-visibility: visible;
backface-visibility: visible;
width: 110px;
height: 110px;
left: 295px;
background-color: transparent;
-webkit-transform: rotateX(-90deg) translateZ(60px);
transform: rotateX(-90deg) translateZ(60px) */
}
</style>
</head>
<body>
<ul class="cube">
<li class="front">
<div class="t t-top"></div>
<div class="t t-down"></div>
</li>
<li class="back">
<div class="t2 t-top"></div>
<div class="t2 t-down"></div>
</li>
<li class="right">
<div class="l2 l-left"></div>
<div class="l2 l-bottom"></div>
</li>
<li class="left">
<div class="l l-left"></div>
<div class="l l-bottom"></div>
</li>
<li class="top">
<div class="p p-up"></div>
<div class="p p-down"></div>
</li>
<li class="bottom">
</li>
<li class="floor"></li>
</ul>
<script id="jsbin-source-css" type="text/css">@-webkit-keyframes slowspin {
from {
-webkit-transform: rotateX(-33.5deg) rotateY(45deg);
transform: rotateX(-33.5deg) rotateY(45deg)
}
50% {
-webkit-transform: rotateX(-33.5deg) rotateY(225deg);
transform: rotateX(-33.5deg) rotateY(225deg)
}
100% {
-webkit-transform: rotateX(-33.5deg) rotateY(405deg);
transform: rotateX(-33.5deg) rotateY(405deg)
}
}
@keyframes slowspin {
0% {
-webkit-transform: rotateX(-33.5deg) rotateY(45deg);
transform: rotateX(-33.5deg) rotateY(45deg)
}
50% {
-webkit-transform: rotateX(-33.5deg) rotateY(225deg);
transform: rotateX(-33.5deg) rotateY(225deg)
}
100% {
-webkit-transform: rotateX(-33.5deg) rotateY(405deg);
transform: rotateX(-33.5deg) rotateY(405deg)
}
}
.cube {
width: 100%;
height: 100%;
padding: 0;
margin: -50px 0;
-webkit-transform-origin: 50px 50px;
transform-origin: 50px 50px;
-webkit-transform: rotateX(-33.5deg) rotateY(45deg);
transform: rotateX(-33.5deg) rotateY(45deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
margin: -50px 0 0 -50px;
-webkit-animation: slowspin 3s ease-in-out infinite 1s;
animation: slowspin 3s ease-in-out infinite 1s;
top: 50%;
left: 50%
}
.cube,
.cube li {
position: absolute;
display: block
}
.cube li {
width: 75pt;
height: 75pt;
transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out
}
.cube li .t, .cube li .l2 {
position: absolute;
background: rgba(223,105,55,1);
}
.cube li .p {
position: absolute;
}
.cube li .l, .cube li .t2 {
position: absolute;
background: rgba(250,167,27,1);
}
.cube li .p-up {
width: 100%;
height: calc(100%/3);
background: rgba(223,105,55,1);
}
.cube li .p-down {
top: calc(100%/3*2 + 1px);
width: 100%;
height: calc(100%/3);
background: rgba(250,167,27,1);
}
.cube li .t-top {
width: 100%;
height: calc(100%/3);
}
.cube li .t2.t-top {
width: 100%;
height: calc(100%/3);
top: calc(100%/3*2 + 1px);
}
.cube li .t-down {
left: calc(100%/3);
width: calc(100%/3);
height: 100%;
}
.cube li .t2.t-down {
left: calc(100%/3);
width: calc(100%/3);
height: 100%;
}
.cube li .l-left {
width: calc(100%/3);
height: 100%;
}
.cube li .l-bottom {
top: calc(100%/3*2 + 1px);
width: 100%;
height: calc(100%/3);
}
.cube .back,
.cube .front,
.cube .left,
.cube .right,
.cube .top {
/* background: radial-gradient(transparent 30%, rgba(16, 47, 91, .2) 100%) */
background: rgba(255,255,255,0.8);
}
.cube li:after {
content: "";
display: block;
position: absolute;
width: 75pt;
height: 75pt;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out
}
.cube .front {
-webkit-transform: translateZ(50px);
transform: translateZ(50px)
}
.cube .back {
-webkit-transform: rotateX(-180deg) translateZ(50px);
transform: rotateX(-180deg) translateZ(50px)
}
.cube .right {
-webkit-transform: rotateY(90deg) translateZ(50px);
transform: rotateY(90deg) translateZ(50px)
}
.cube .left {
-webkit-transform: rotateY(-90deg) translateZ(50px);
transform: rotateY(-90deg) translateZ(50px)
}
.cube .top {
-webkit-transform: rotateX(90deg) translateZ(50px);
transform: rotateX(90deg) translateZ(50px)
}
.cube .top:after {
/* background-color: rgba(255, 255, 255, .5) */
}
.cube .bottom {
-webkit-transform: rotateX(-90deg) translateZ(50px);
transform: rotateX(-90deg) translateZ(50px)
}
.cube .floor:after {
display: none
}
.cube .floor {
/* box-shadow: -300px 0 50px rgba(0, 0, 0, .3);
-webkit-backface-visibility: visible;
backface-visibility: visible;
width: 110px;
height: 110px;
left: 295px;
background-color: transparent;
-webkit-transform: rotateX(-90deg) translateZ(60px);
transform: rotateX(-90deg) translateZ(60px) */
}</script>
</body>
</html>
@-webkit-keyframes slowspin {
from {
-webkit-transform: rotateX(-33.5deg) rotateY(45deg);
transform: rotateX(-33.5deg) rotateY(45deg)
}
50% {
-webkit-transform: rotateX(-33.5deg) rotateY(225deg);
transform: rotateX(-33.5deg) rotateY(225deg)
}
100% {
-webkit-transform: rotateX(-33.5deg) rotateY(405deg);
transform: rotateX(-33.5deg) rotateY(405deg)
}
}
@keyframes slowspin {
0% {
-webkit-transform: rotateX(-33.5deg) rotateY(45deg);
transform: rotateX(-33.5deg) rotateY(45deg)
}
50% {
-webkit-transform: rotateX(-33.5deg) rotateY(225deg);
transform: rotateX(-33.5deg) rotateY(225deg)
}
100% {
-webkit-transform: rotateX(-33.5deg) rotateY(405deg);
transform: rotateX(-33.5deg) rotateY(405deg)
}
}
.cube {
width: 100%;
height: 100%;
padding: 0;
margin: -50px 0;
-webkit-transform-origin: 50px 50px;
transform-origin: 50px 50px;
-webkit-transform: rotateX(-33.5deg) rotateY(45deg);
transform: rotateX(-33.5deg) rotateY(45deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
margin: -50px 0 0 -50px;
-webkit-animation: slowspin 3s ease-in-out infinite 1s;
animation: slowspin 3s ease-in-out infinite 1s;
top: 50%;
left: 50%
}
.cube,
.cube li {
position: absolute;
display: block
}
.cube li {
width: 75pt;
height: 75pt;
transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out
}
.cube li .t, .cube li .l2 {
position: absolute;
background: rgba(223,105,55,1);
}
.cube li .p {
position: absolute;
}
.cube li .l, .cube li .t2 {
position: absolute;
background: rgba(250,167,27,1);
}
.cube li .p-up {
width: 100%;
height: calc(100%/3);
background: rgba(223,105,55,1);
}
.cube li .p-down {
top: calc(100%/3*2 + 1px);
width: 100%;
height: calc(100%/3);
background: rgba(250,167,27,1);
}
.cube li .t-top {
width: 100%;
height: calc(100%/3);
}
.cube li .t2.t-top {
width: 100%;
height: calc(100%/3);
top: calc(100%/3*2 + 1px);
}
.cube li .t-down {
left: calc(100%/3);
width: calc(100%/3);
height: 100%;
}
.cube li .t2.t-down {
left: calc(100%/3);
width: calc(100%/3);
height: 100%;
}
.cube li .l-left {
width: calc(100%/3);
height: 100%;
}
.cube li .l-bottom {
top: calc(100%/3*2 + 1px);
width: 100%;
height: calc(100%/3);
}
.cube .back,
.cube .front,
.cube .left,
.cube .right,
.cube .top {
/* background: radial-gradient(transparent 30%, rgba(16, 47, 91, .2) 100%) */
background: rgba(255,255,255,0.8);
}
.cube li:after {
content: "";
display: block;
position: absolute;
width: 75pt;
height: 75pt;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out
}
.cube .front {
-webkit-transform: translateZ(50px);
transform: translateZ(50px)
}
.cube .back {
-webkit-transform: rotateX(-180deg) translateZ(50px);
transform: rotateX(-180deg) translateZ(50px)
}
.cube .right {
-webkit-transform: rotateY(90deg) translateZ(50px);
transform: rotateY(90deg) translateZ(50px)
}
.cube .left {
-webkit-transform: rotateY(-90deg) translateZ(50px);
transform: rotateY(-90deg) translateZ(50px)
}
.cube .top {
-webkit-transform: rotateX(90deg) translateZ(50px);
transform: rotateX(90deg) translateZ(50px)
}
.cube .top:after {
/* background-color: rgba(255, 255, 255, .5) */
}
.cube .bottom {
-webkit-transform: rotateX(-90deg) translateZ(50px);
transform: rotateX(-90deg) translateZ(50px)
}
.cube .floor:after {
display: none
}
.cube .floor {
/* box-shadow: -300px 0 50px rgba(0, 0, 0, .3);
-webkit-backface-visibility: visible;
backface-visibility: visible;
width: 110px;
height: 110px;
left: 295px;
background-color: transparent;
-webkit-transform: rotateX(-90deg) translateZ(60px);
transform: rotateX(-90deg) translateZ(60px) */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment