JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="container">
<div class="thing"><div></div></div>
<div class="lines"><div>

</div></div>
</div>

<div class="cube"><div></div><div></div></div>

<div class="lines"><div>

</div></div>

<h1>RASMUS FL0E</h1>

<canvas id="webgl" width="400" height="200"></canvas>

CSS

@font-face {
	font-family: "Entermono";
	font-style: normal;
	font-weight: normal;
	src: url("http://ansi.me/entermono.woff") format("woff");
}

body {
	transform-style: preserve-3d;
	font-family: "Entermono";
}

.container {
	perspective: 1px;
	transition: perspective-origin 2s ease-in-out, perspective 2s ease-in-out;
}
.container:hover {
	_perspective: 100px;
	perspective-origin: 40% 50%;
}
.thing {
	width: 200px;
	transform: rotateX(25deg) rotateY(45deg) rotateZ(55deg);
	transform-style: preserve-3d;
	transition: transform .2s ease-in-out;
}
.thing:hover {
	_transform: rotateX(-10deg) rotateY(-60deg) rotateZ(100deg);
	transform: rotateX(45deg) rotateY(45deg) rotateZ(55deg) translate3d(20px, 500px, -20px);
}
.thing > :nth-child(1) {
	width: 0px;
	transform: rotateZ(45deg);
	border: 100px transparent solid;
	border-color-top: #000;
	border-left: 150px #000 solid;
	filter: blur(10px);
}

.cube, .cube > * {
	transform-origin: inherit;
	transform-style: inherit;
	box-shadow: 50px 50px 50px rgba(0, 0, 0, .25);
}
.cube {
	_perspective: 10px;
	transform: rotateX(-35.264deg) rotateY(45deg) translateX(150px) translateZ(300px);
	color: #000;
	background-color: currentColor;
	width: 100px;
	height: 100px;
	position: relative;
	transition: transform .5s ease-in-out;
	_transform-style: flat;
}
.cube:hover {
	transform: rotateX(-15.264deg) rotateY(75deg) translateZ(300px);
	_animation: flicker 1s infinite;
}
.cube > * {
	background-color: inherit;
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: inherit;
	transform-origin: 0 0 0;
	background-clip: inherit;
}
.cube > :nth-child(1) {
	padding-bottom: 100%;
	transform: rotateX(-90deg);
	height: 0;
	width: 100%;
}
.cube:hover > :nth-child(1) {
	animation: .3s flicker 1s infinite;
}
.cube > :nth-child(2) {
	transform: rotateY(90deg);
	width: 100%;
	height: 100%;
}
.cube:hover > :nth-child(2) {
	animation: .15s flicker 1s infinite;
}

@keyframes flicker {
	0% {
		opacity: 1;
	}
	5% {
		opacity: 0;
	}
	10%...

JavaScript

var context = webgl.getContext("webgl") || webgl.getContext("experimental-webgl");

context.clearColor(0.0, 0.0, 0.0, 1.0);  // Set clear color to black, fully opaque
context.clearDepth(1.0);                 // Clear everything
context.enable(context.DEPTH_TEST);           // Enable depth testing
context.depthFunc(context.LEQUAL);
context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT);

console.log("context", context.DEPTH_TEST);