Jumping Cube

HTML
<div class="jump"> <div class="scale"> <div class="cube"> <div class="face"></div> <div class="face"></div> <div class="face"></div> <div class="face"></div> </div> </div> </div>
SCSS
html, body{ display: flex; justify-content: center; align-items: center; min-height: 100%; perspective: 20em; background: #F1E6D9; transform: translateZ(0) } @keyframes rotate{ 0%,10%{ transform: rotateX(70deg) rotateZ(45deg); } 25%,35%{ transform: rotateX(70deg) rotateZ(135deg); } 50%,65%{ transform: rotateX(70deg) rotateZ(225deg); } 75%,85%{ transform: rotateX(70deg) rotateZ(315deg); } 100%{ transform: rotateX(70deg) rotateZ(405deg); } } @keyframes jump{ 0%, 90%, 100%{ transform: translateY(-10vh); } 40%{ transform: translateY(30vh); } } @keyframes scale{ 0%, 10%, 70%, 100%{ transform: scaleY(1); } 50%{ transform: scaleY(.4); } } .jump { animation: jump 1s cubic-bezier(0.785, 0.135, 0.150, 0.860) infinite; transform-style: preserve-3d; } .scale{ animation: scale 1s cubic-bezier(0.785, 0.135, 0.150, 0.860) infinite; transform-style: preserve-3d; transform-origin: 100% 100% 0; } .cube{ width: 4em; height: 4em; animation: rotate 4s .5s cubic-bezier(0.645, 0.045, 0.355, 1.000) infinite reverse; transform: rotateX(70deg) rotateZ(45deg); transform-style: preserve-3d; &:after, &:before{ content: ""; will-change: transform; display: block; width: 4em; height: 4em; background: #333; position: absolute; } &:before{ transform: translateZ(4em); } } .face{ position: absolute; width: 4em; height: 4em; background: rgba(0,0,0,.4); transform-style: preserve-3d; &:nth-child(1){ transform: rotateX(90deg); transform-origin: 50% 0; background: #F7CB53; } &:nth-child(2){ transform: rotateX(90deg) translateZ(-4em); transform-origin: 50% 0; background: #E35941; } &:nth-child(3){ transform: rotateX(90deg) rotateY(-90deg); transform-origin: 100% 0; background: #289EAA; } &:nth-child(4){ transform: rotateX(90deg) rotateY(-90deg) translateZ(4em); transform-origin: 100% 0; background: #C3DB6D; } }
JAVASCRIPT
Expand for more options Login