%ul
	- 2.times do
		%li
			.link
				- 4.times do
					%a{:href => "https://codepen.io/gabriellewee", :target => "_blank"}
				.cube.codepen
					- 4.times do
						%div
					%div Front content
					%div Back content

%svg.clips{:viewbox => "0 0 0 0", :xmlns => "http://www.w3.org/2000/svg"}
	%defs
		%clippath#clip-right
			%polygon{:points => "48 0 48 96 0 48"}
		%clippath#clip-left
			%polygon{:points => "0 0 0 96 48 48"}
		%clippath#clip-bottom
			%polygon{:points => "96 48 0 48 48 0"}
		%clippath#clip-top
			%polygon{:points => "0 0 96 0 48 48"}
View Compiled
// variables
$p: 12px;
$c: #666;

// basic required styling
ul {
	perspective: 1000px;
	transform: translateZ(#{$p*8});
}

.clips {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	opacity: 0;
	z-index: -100;
}

.link {
	position: relative;
	width: $p*8;
	height: $p*8;
	a {
		transform-origin: $p*4 $p*4 -#{$p*4};
		display: block;
		position: absolute;
		z-index: 1;
		transform: translateZ(#{$p*2});
		width: 100%;
		height: 100%;
		&:nth-child(1) {
			top: 0;
			left: 0;
			height: 50%;
			clip-path: polygon(50% 100%, 0 0, 100% 0);
			@-moz-document url-prefix() {
				clip-path: url(#clip-top);
			}
			&:hover, &:focus {
				~ .cube {
					transform: rotateX(-0.5turn);
				}
			}
		}
		&:nth-child(2) {
			top: 0;
			right: 0;
			width: 50%;
			clip-path: polygon(100% 100%, 0 50%, 100% 0);
			@-moz-document url-prefix() {
				clip-path: url(#clip-right);
			}
			&:hover, &:focus {
				~ .cube {
					transform: rotateY(-0.5turn);
				}
			}
		}
		&:nth-child(3) {
			bottom: 0;
			right: 0;
			height: 50%;
			clip-path: polygon(0 100%, 50% 0, 100% 100%);
			@-moz-document url-prefix() {
				clip-path: url(#clip-bottom);
			}
			&:hover, &:focus {
				~ .cube {
					transform: rotateX(0.5turn);
				}
			}
		}
		&:nth-child(4) {
			bottom: 0;
			left: 0;
			width: 50%;
			clip-path: polygon(0 100%, 0 0, 100% 50%);
			@-moz-document url-prefix() {
				clip-path: url(#clip-left);
			}
			&:hover, &:focus {
				~ .cube {
					transform: rotateY(0.5turn);
				}
			}
		}
	}
}

.cube {
	transition: all 300ms ease-out;
	transform-origin: $p*4 $p*4 -#{$p*4};
	position: relative;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	div {
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		color: white;
		// top
		&:nth-child(1) {
			transform-origin: center top;
			transform: rotateX(90deg) translateY(#{-($p*8)});
			background: lighten($c, 35%);
		}
		// bottom
		&:nth-child(2) {
			transform-origin: center bottom;
			transform: rotateX(-90deg) translateY($p*8);
			background: lighten($c, 10%);
		}
		// left
		&:nth-child(3) {
			transform-origin: left center;
			transform: rotateY(-90deg) translateX(#{-($p*8)});
			background: lighten($c, 20%);
		}
		// right
		&:nth-child(4) {
			transform-origin: right center;
			transform: rotateY(90deg) translateX($p*8);
			background: lighten($c, 20%);
		}
		// front
		&:nth-child(5) {
			transform-origin: center center;
			transform: rotateX(0);
			background: $c;
		}
		// back
		&:nth-child(6) {
			transform-origin: center center;
			transform: rotateY(180deg) translateZ($p*8);
			background: white;
			color: $c;
		}
	}
}

// basic styling for demo purposes
*, *:before, *:after { box-sizing: border-box; }
* { user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); transform-style: preserve-3d; }
*:focus { outline: none!important; }
body, html { height: 100%; }
body {
	background: lighten($c, 15%);
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	padding: $p;
	font-size: 14px;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

ul {
	display: flex;
	padding: $p;
	li {
		padding: $p;
	}
}

.link {
	a {
		&:nth-child(1) {
			background: rgba(red, .25);
			&:hover, &:focus {
				background: rgba(red, .5);
			}
		}
		&:nth-child(2) {
			background: rgba(blue, .25);
			&:hover, &:focus {
				background: rgba(blue, .5);
			}
		}
		&:nth-child(3) {
			background: rgba(green, .25);
			&:hover, &:focus {
				background: rgba(green, .5);
			}
		}
		&:nth-child(4) {
			background: rgba(purple, .25);
			&:hover, &:focus {
				background: rgba(purple, .5);
			}
		}
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.