axyz logo

by phloe

HTML

<div class="logo">
	<div class="plane plane--y">
		<div style="top: 45vmin; left: 15vmin;"></div>
		<div style="top: 50vmin; left: 30vmin;"></div>
		<div style="top: 50vmin; left: 49vmin;"></div>
		<div style="top: 45vmin; left: 55vmin;"></div>
		<div style="top: 50vmin; left: 60vmin;"></div>
	</div>
	<div class="plane plane--z">
		<div style="top: 40vmin; left: 24vmin;"></div>
		<div style="top: 50vmin; left: 34vmin;"></div>
		<div style="top: 50vmin; left: 40vmin;"></div>
	</div>
</div>

SCSS

body {
	transform: rotate(30deg);
	transform-style: flat;
	perspective: 10000px;
	background-color: #333;
}
.logo {
	width: 100vmin;
	height: 100vmin;
	position: relative;
	margin-left: 50%;
	margin-top: 50%;
	transform: translate(-50%, -50%) rotateX(54deg) rotateY(0deg) rotateZ(-45deg);
	transform-style: preserve-3d;
	transition: transform .5s ease-in-out;
	
	.plane {
		width: inherit;
		height: inherit;
		position: absolute;
		top: 0;
		left: 0;
		transform-origin: 50% 50%;
		transition: transform .2s ease-in-out;
		
		&--x {
			transform: rotateY(90deg);
		}
		
		&--y {
			transform: rotateX(-90deg);
			
			> div {
				&:nth-child(2) {
					transition-delay: .1s, .1s, .1s;
				}

				&:nth-child(3) {
					height: 10vmin;
					transition-delay: .2s, .2s, .2s;
				}
				
				&:nth-child(4) {
					height: 10vmin;
				}
				&:nth-child(4),
				&:nth-child(5) {
					transition-delay: .3s, .3s, .3s;
				}
			}
		}
		
		&--z {
			> div {
				
				&:nth-child(1) {
					height: 10vmin;
				}
				
				&:nth-child(2) {
					transition-delay: .1s, .1s, .1s;
				}

				&:nth-child(3) {
					transition-delay: .2s, .2s, .2s;
				}
			}
		}
		
		> div {
			position: absolute;
			background-color: #fff;
			width: 5vmin;
			height: 5vmin;
			transition:
				opacity .2s ease-in-out,
				transform .2s ease-in-out,
				background-color .2s ease-in-out;
				
			&:before {
				content: "";
				display: block;
				width: 1px;
				height: 45vmin;
				background: linear-gradient(0deg, transparent 0, #fff 50%, transparent 100%);
				transform: translateY(-20vmin);
				transform-origin: 0 50%;
				opacity: .2;
			}
		}
	}
	
	&--hidden {
		_transform: translate(-50%, -50%) rotateX(60deg) rotateY(10deg) rotateZ(-60deg);

		.plane {
			
			> div {
				opacity: 0;
				_transition-easing: ease-in, ease-in;

				&:before {
					_transform: translateY(-20vmin) scaleY(2);
				}
			}
			&--y > div {
				transform: translateY(5vmin);
				
				&:nth-child(1) {
					background-color:...

JavaScript

var body = document.querySelector(".logo");
window.addEventListener("click", function () {
	body.classList.toggle("logo--hidden")
});