Loading


1
2
3
4
5
6
.container { width: 200px; height: 200px; position: relative; perspective: 1000px; } #cube { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; } #cube figure { margin: 0; width: 196px; height: 196px; display: block; position: absolute; border: 2px solid black; } #cube .front { transform: rotateY( 0deg ); } #cube .back { transform: rotateX( 180deg ); } #cube .right { transform: rotateY( 90deg ); } #cube .left { transform: rotateY( -90deg ); } #cube .top { transform: rotateX( 90deg ); } #cube .bottom { transform: rotateX( -90deg ); } #cube .front { transform: rotateY( 0deg ) translateZ( 100px ); } #cube .back { transform: rotateX( 180deg ) translateZ( 100px ); } #cube .right { transform: rotateY( 90deg ) translateZ( 100px ); } #cube .left { transform: rotateY( -90deg ) translateZ( 100px ); } #cube .top { transform: rotateX( 90deg ) translateZ( 100px ); } #cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); } #cube { transform: translateZ( -100px ); } #cube.show-front { transform: translateZ( -100px ) rotateY( 0deg ); } #cube.show-back { transform: translateZ( -100px ) rotateX( -180deg ); } #cube.show-right { transform: translateZ( -100px ) rotateY( -90deg ); } #cube.show-left { transform: translateZ( -100px ) rotateY( 90deg ); } #cube.show-top { transform: translateZ( -100px ) rotateX( -90deg ); } #cube.show-bottom { transform: translateZ( -100px ) rotateX( 90deg ); } #cube { transition: transform 1s; }

riolugirl111:

image

(via thesoundthisimagemakes)

This was posted 3 weeks ago. It has 8,420 notes and 0 comments. Played 29 times.