Triangular prisms with pseudo-elements and transforms

dabblet.css

/**
 * Triangular prisms with pseudo-elements and transforms
 **/

body {
	background: #fff;
}

#origin {
	transform-style: preserve-3d;
	transform:
		translateX(40px)
		translateY(30px)
	;
}

.prism, .prism:before, .prism:after {
	background: #00c;
	height: 150px;
	position: relative;
	width: 50px;
}

.prism {
	transform-style: preserve-3d;
	animation: rotate-slowly 20s infinite;
	transform-origin: 50% 50% 50%
}

.prism:before, .prism:after {
	content: '';
	display: block;
	position: absolute;
}

.prism:before {
	background: #c00;
	left: 0;
	transform-origin: 0 0;
	transform: rotateY(60deg);
}

.prism:after {
	background: #0c0;
	right: 0;
	transform-origin: 100% 0;
	transform: rotateY(-60deg);
}


@keyframes rotate-slowly {
	0%   {
		transform:
			rotateX(0deg)
			rotateY(0deg)
			rotateZ(0deg)
		;
	}
	
	33%   {
		transform:
			rotateX(180deg)
			rotateY(0deg)
			rotateZ(0deg)
		;
	}
	
	66%   {
		transform:
			rotateX(180deg)
			rotateY(180deg)
			rotateZ(0deg)
		;
	}
	
	100%   {
		transform:
			rotateX(360deg)
			rotateY(360deg)
			rotateZ(360deg)
		;
	}
}

dabblet.html

<div id="origin">
	<div class="prism"></div>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}