CSS Cube

CSS Cube

// HTML

<div class="cube-wrapper">
<div class="perspective">
<div class="cube">
<div class="front">
<img src="img/abfab400.jpg" alt="Absolutely Fabulous">
</div>
<div class="back">
<img src="img/blackbooks400.jpg" alt="Black Books">
</div>
<div class="top">
<img src="img/downton400.jpg" alt="Downton Abbey">
</div>
<div class="bottom">
<img src="img/office400.jpg" alt="The Office">
</div>
<div class="left">
<img src="img/fools400.jpg" alt="Only Fools and Horses">
</div>
<div class="right">
<img src="img/blackadder400.jpg" alt="Blackadder">
</div>
</div>
</div>
</div>


// CSS

.cube-wrapper
		margin: 0 auto
		position: absolute
		top: 21%
		width: 100%
		z-index: -1
	.perspective
		position: relative
		+perspective(rem(2000))
		+perspective-origin(25rem rem(-550))
		z-index: -1
	.cube
		+animation(rotate 25s infinite linear)
		margin: 0 auto
		position: relative
		+transform-style(preserve-3d)
		+transition(all .5s)
		width: rem(100)
		div
			height: rem(100)
			opacity: .9
			position: absolute
			width: rem(100)
		img
			max-height: 100%
			max-width: 100%
	+keyframes(rotate)
		from 
			+transform(rotateY(0deg))
		to 
			+transform(rotateY(360deg))
	.front
		+transform(translateZ(rem(0)))
	.back
		+transform(translateZ(rem(-100)))
		rotateY(180deg)
	.left
		+transform(rotateY(270deg) translateX(rem(-100)))
		+transform-origin(center left)
	.right
		+transform(rotateY(-270deg) translateX(rem(100)))
		+transform-origin(top right)
	.top
		+transform(rotateX(90deg) translateY(rem(-100)))
		+transform-origin(top center)
	.bottom
		+transform(rotateX(-90deg) translateY(rem(100)))
		+transform-origin(bottom center)