Geometrical Cube

JADE
figure .face.front div div div div div div div div div .face.top div div div div div div div div div .face.right div div div div div div div div div .face.left div div div div div div div div div .face.bottom div div div div div div div div div .face.back div div div div div div div div div
CSS
body { background: #00c07f; } figure { width: 210px; height: 210px; animation: rotation 7s linear infinite; position: absolute; top: 50%; left: 50%; margin-top: -105px; margin-left: -105px; transform-style: preserve-3d; } .face { width: 100%; height: 100%; position: absolute; transform-origin: center; } .face div { border: 6px double #2c3e50; width: 70px; height: 70px; display: inline-block; box-sizing: border-box; vertical-align: top; } .front { transform: translate3d(0,0,105px); } .back { transform: rotateY(180deg) translate3d(0,0,105px); } .left { transform: rotateY(-90deg) translate3d(0,0,105px); } .right { transform: rotateY(90deg) translate3d(0,0,105px); } .top { transform: rotateX(90deg) translate3d(0,0,105px); } .bottom { transform: rotateX(-90deg) translate3d(0,0,105px); } @keyframes rotation { from { transform: rotateY(0) rotateX(0); } to { transform: rotateY(-360deg) rotateX(360deg); } }
JAVASCRIPT
Expand for more options Login