Glowing rod (structural element)

dabblet.css

/**
 * Glowing rod (structural element)
 **/

body {
	background: #047;
}

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

.prism, .prism:before, .prism:after {
	background: #fff;
	box-shadow:
		0 0 20px #fff,
		0 0 15px #fff,
		0 0 10px #fff,
		0 0 5px #fff,
		0 0 2px #fff,
		0 0 1px #fff
	;
	height: 150px;
	position: relative;
	width: 20px;
}

.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 {
	left: 0;
	transform-origin: 0 0;
	transform: rotateY(60deg);
}

.prism:after {
	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"}