fff/* Created by abcd */
/* Modified by visph (convert rectangle to triangle face shapes) */

html{
	min-height: 100%;
}
body{
	background: linear-gradient(blue, green);
}
.container{
	height: 173px;
	width: 200px;
	margin: 25% 25%;
	position: relative;
	perspective: 1000px;
	transform-style: preserve-3d;
}
.pyramid{
	height: 173px;
	width: 200px;
	position: relative;
	transform-style: preserve-3d;
	animation: revolve 8s linear infinite ;
}
@keyframes revolve{
	0% {transform: rotateY(360deg) rotateX(0deg);
	}
}
.face{
	height: 173px;
	width: 200px;
	position: absolute;
	perspective: 600px;
	background:none; /* red; */
	transform-origin: 50% 66.66%;
	opacity: 0.7;
	overflow:hidden;
}
.front{
	transform:rotateX(19.4deg) translate3d(0,0,41px);
	background:none; /* yellow; /* red; */
}
.left{
	transform: rotateY(120deg) rotateX(19.4deg) translate3d(0,0,41px);
	background:none; /* blue; */
}
.right{
	transform: rotateY(-120deg) rotateX(19.4deg) translate3d(0,0,41px);
	background:none; /* green; */
}
.bottom{
	transform: rotateX(-90deg) rotateZ(180deg) translate3d(0,0,41px);
	background:none; /* yellow; */
}
.face > div {
	display:inline-block;
	background:none; /* orange; */
	width:100%;
	height:200px;
	transform-origin:0 100%;
	transform:translateY(-27px) rotateZ(30deg);
	overflow:hidden;
}
.face > div > div {
	display:inline-block;
	width:100%;
	height:100%;
	transform-origin:0 0;
	transform:rotateZ(30deg);
}
.front > div > div {
	background:red;
}
.left > div > div {
	background:blue;
}
.right > div > div {
	background:green;
}
.bottom > div > div {
	background:yellow;
}
lude the next line in all your web pages, they will all share the same look.
         This makes it easier to make new pages for your site. -->