A CodePen by Béla Varga. Pure CSS3 rotating tetrahedron

index.html

<div class="tetrahedron">
		<figure class="front"><div class="triangle"></div></figure>
		<figure class="left"><div class="triangle"></div></figure>
		<figure class="right"><div class="triangle"></div></figure>
		<figure class="bottom"><div class="triangle"></div></figure>
</div>

style.css

body, html {
    background-color: #000
    }

figure {
    display: block;
    position: absolute
    }

.triangle {
    border-color: transparent transparent rgba(255, 255, 255, 0.8);
    border-width: 0 125px 216px;
    border-style: solid
    }

.tetrahedron {
    margin: 0px auto;
    width: 300px;
    height: 300px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: initialrotate infinite 3s;
    -moz-animation: initialrotate infinite 3s;
    animation: initialrotate infinite 3s;
    }

.tetrahedron:hover {
    opacity: 0.6;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: hoverrotate linear infinite 14s;
    -moz-animation: hoverrotate linear infinite 14s;
    }

.tetrahedron figure {
    height: 216px
    }

.tetrahedron .front {
    -moz-transform: rotatex(19.5deg);
    -ms-transform: rotatex(19.5deg);
    -o-transform: rotatex(19.5deg);
    -webkit-transform: rotatex(19.5deg);
    transform: rotatex(19.5deg);
    -moz-transform-origin: 50% 0 0;
    -ms-transform-origin: 50% 0 0;
    -o-transform-origin: 50% 0 0;
    -webkit-transform-origin: 50% 0 0;
    transform-origin: 50% 0 0
    }

.tetrahedron .bottom {
    -moz-transform: rotatex(90deg) translatey(-35px) translatez(-96px);
    -ms-transform: rotatex(90deg) translatey(-35px) translatez(-96px);
    -o-transform: rotatex(90deg) translatey(-35px) translatez(-96px);
    -webkit-transform: rotatex(90deg) translatey(-35px) translatez(-96px);
    transform: rotatex(90deg) translatey(-35px) translatez(-96px);
    -moz-transform-origin: 0% 100% 0%;
    -ms-transform-origin: 0% 100% 0%;
    -o-transform-origin: 0% 100% 0%;
    -webkit-transform-origin: 0% 100% 0%;
    transform-origin: 0% 100% 0%
    }

.tetrahedron .left {
    -moz-transform: translatex(0) rotatey(60deg) rotatex(-19.5deg);
    -ms-transform: translatex(0) rotatey(60deg) rotatex(-19.5deg);
    -o-transform: translatex(0) rotatey(60deg) rotatex(-19.5deg);
    -webkit-transform: translatex(0) rotatey(60deg) rotatex(-19.5deg);
    transform: translatex(0) rotatey(60deg) rotatex(-19.5deg);
    -moz-transform-origin: 50% 0 0;
    -ms-transform-origin: 50% 0 0;
    -o-transform-origin: 50% 0 0;
    -webkit-transform-origin: 50% 0 0;
    transform-origin: 50% 0 0
    }

.tetrahedron .right {
    -moz-transform: translatex(0) rotatey(-60deg) rotatex(-19.5deg);
    -ms-transform: translatex(0) rotatey(-60deg) rotatex(-19.5deg);
    -o-transform: translatex(0) rotatey(-60deg) rotatex(-19.5deg);
    -webkit-transform: translatex(0) rotatey(-60deg) rotatex(-19.5deg);
    transform: translatex(0) rotatey(-60deg) rotatex(-19.5deg);
    -moz-transform-origin: 50% 0 0;
    -ms-transform-origin: 50% 0 0;
    -o-transform-origin: 50% 0 0;
    -webkit-transform-origin: 50% 0 0;
    transform-origin: 50% 0 0
    }

@-webkit-keyframes initialrotate {
to {
    -webkit-transform: rotatez(360deg) rotatex(360deg);
    transform: rotatez(360deg) rotatex(360deg)
    }
}
@-moz-keyframes initialrotate {
to {
    -moz-transform: rotatez(360deg) rotatex(360deg);
    transform: rotatez(360deg) rotatex(360deg)
    }
}
@keyframes initialrotate {
    to {
        transform: rotateZ(360deg) rotateX(360deg)
        }
    }
@-webkit-keyframes hoverrotate {
to {
    -webkit-transform: rotatex(360deg) rotatey(360deg) rotatez(360deg);
    transform: rotatex(360deg) rotatey(360deg) rotatez(360deg)
    }
}
@-moz-keyframes hoverrotate {
to {
    -moz-transform: rotatex(360deg) rotatey(360deg) rotatez(360deg);
    transform: rotatex(360deg) rotatey(360deg) rotatez(360deg)
    }
}
@keyframes hoverrotate {
    to {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)
        }
    }