Rotating 3D Cube
A six-faced 3D cube rotating on two axes using CSS transforms and preserve-3d.
<div class="scene"><div class="cube"><div class="face f1"></div><div class="face f2"></div><div class="face f3"></div><div class="face f4"></div><div class="face f5"></div><div class="face f6"></div></div></div>body{background:#0d1426}
.scene{width:120px;height:120px;perspective:600px}
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;animation:spin 7s linear infinite}
.face{position:absolute;width:120px;height:120px;border:2px solid rgba(255,255,255,.3);opacity:.9}
.f1{background:#ff7a18;transform:rotateY(0) translateZ(60px)}
.f2{background:#ff477e;transform:rotateY(90deg) translateZ(60px)}
.f3{background:#5b6cff;transform:rotateY(180deg) translateZ(60px)}
.f4{background:#00d4ff;transform:rotateY(-90deg) translateZ(60px)}
.f5{background:#16a34a;transform:rotateX(90deg) translateZ(60px)}
.f6{background:#a855f7;transform:rotateX(-90deg) translateZ(60px)}
@keyframes spin{0%{transform:rotateX(0) rotateY(0)}100%{transform:rotateX(360deg) rotateY(360deg)}}Free to use.This snippet is plain HTML, CSS and JavaScript with no dependencies. Copy any file, or download the whole thing as a single ready-to-open .html page.