A Pen by Sandeep.

A-Pen-by-Sandeep.markdown

Collapsing cube by Sandeep

A Pen by Sandeep on CodePen.

License.

index.html

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

style.sass

@import "compass"
//colors
$main: #000    
$accent: #d22      
  
//dimensions
$size: 75px

=keyframes($name)
	@-webkit-keyframes #{$name}
		@content
	@keyframes #{$name}
		@content

+keyframes(pane1)
	to
		+transform(translateZ($size))
		opacity: 0

+keyframes(pane2)
	to
		+transform(translateZ(-$size))
		opacity: 0

+keyframes(pane3)
	to
		+transform(rotateX(90deg) translateZ($size))	
		opacity: 0

+keyframes(pane4)
	to
		+transform(rotateX(90deg) translateZ(-$size))
		opacity: 0

+keyframes(pane5)
	to
		+transform(rotateY(90deg) translateZ($size))
		opacity: 0

+keyframes(pane6)
	to
		+transform(rotateY(90deg) translateZ(-$size))
		opacity: 0

html, body
	height: 100%
	overflow: hidden

body
	+background(radial-gradient(50% 50%, circle, lighten($accent,5%), darken($main, 10%)))

ul
	width: $size
	height: $size
	margin: 0 auto
	position: absolute
	top: 50%
	left: 50%
	margin-top: $size / 2 * -1
	margin-left: $size / 2 * -1
	display: block
	-webkit-transform-style: preserve-3d
	transform-style: preserve-3d
	+transform(rotateX(45deg) rotateY(-45deg))

li
	position: absolute
	border: 1px solid $accent
	width: $size
	height: $size
	+background(linear-gradient(top,lighten($main,20%), $main))
	opacity: 0.5

	&:nth-child(1)
		+transform(translateZ($size/2))

	&:nth-child(2)
		+transform(translateZ(-$size/2))

	&:nth-child(3)
		+transform(rotateX(90deg) translateZ($size/2))

	&:nth-child(4)
		+transform(rotateX(90deg) translateZ(-$size/2))

	&:nth-child(5)
		+transform(rotateY(90deg) translateZ($size/2))

	&:nth-child(6)
		+transform(rotateY(90deg) translateZ(-$size/2))

	@for $i from 1 to 7
		&:nth-child(#{$i})
			-webkit-animation: pane#{$i} 2s infinite
			animation: pane#{$i} 2s infinite