Party Cube

HTML
<div></div>
CSS
* { margin: 0; padding: 0; position: relative; box-sizing: border-box; } html, body { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #25282B; -webkit-perspective: 10000px; perspective: 10000px; } div { height: 100px; width: 100px; background-color: #C84B4F; -webkit-transform: rotateX(55deg) rotateZ(45deg); transform: rotateX(55deg) rotateZ(45deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation: color-cycle 0.5s steps(1, end) infinite; animation: color-cycle 0.5s steps(1, end) infinite; } div:after, div:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); -webkit-transform-origin: top; transform-origin: top; background-color: #FFCC01; } div:before { background-color: #638DD4; -webkit-transform: translateY(-100%) rotateX(90deg) rotateY(-90deg); transform: translateY(-100%) rotateX(90deg) rotateY(-90deg); -webkit-transform-origin: bottom right; transform-origin: bottom right; } div:before { -webkit-animation: color-cycle 0.5s steps(1, end) infinite; animation: color-cycle 0.5s steps(1, end) infinite; -webkit-animation-delay: -.2s; animation-delay: -.2s; } div:after { -webkit-animation: color-cycle 0.5s steps(1, end) infinite; animation: color-cycle 0.5s steps(1, end) infinite; -webkit-animation-delay: -.1s; animation-delay: -.1s; } @-webkit-keyframes color-cycle { 0% { background-color: #c64f51; } 25% { background-color: #a881a2; } 50% { background-color: #4fb5c6; } 75% { background-color: #fcb500; } } @keyframes color-cycle { 0% { background-color: #c64f51; } 25% { background-color: #a881a2; } 50% { background-color: #4fb5c6; } 75% { background-color: #fcb500; } }
JAVASCRIPT
Expand for more options Login