Template:3DCube

testing 3D stuff (could be useful since the scnapedia logo is literally a 3D cube! {{#css: .scene { width: 200px; height: 200px; perspective: 600px; margin: 100px; }

.cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: rotatey 5s linear infinite; }

.cube-face { position: absolute; width: 200px; height: 200px; } .flip img { transform: scaleX(-1); } .face-front { transform: rotateY( 0deg) translateZ(100px); } .face-right { transform: rotateY( 90deg) translateZ(100px); } .face-back { transform: rotateY(180deg) translateZ(100px); } .face-left { transform: rotateY(-90deg) translateZ(100px); } .face-top { transform: rotateX( 90deg) translateZ(100px); } .face-bottom { transform: rotateX(-90deg) translateZ(100px); } @keyframes rotatey { 0% { transform: rotate3d(0, 0, 1, 0deg); } 100% { transform: rotate3d(1, 0, 1, 360deg); } } /* most of the css was taken from https://3dtransforms.desandro.com/cube */ }}