On reflection – Chris Smith

See the Pen
On reflection by Chris Smith (@BlogFire)
on CodePen.

<section>
	<h1 class="reflection">on reflection</h1>
	<h1>on reflection</h1>
</section>

<a href="https://codepen.io/BlogFire" target="_blank" title="More of my work">
	<div class="roma"></div>
</a>

h1 {
	font-size: max(2.75rem, 10cqi);
	line-height: 0.53;
	color: #4d1a7f;
	text-transform: uppercase;
	transform-style: preserve-3d;
}
.reflection {
	color: #4d1a7f;
	-webkit-text-stroke: 1px #4d1a7f;
	transform-origin: bottom;
}

section {
	display: grid;
	place-items: end center;
	width: 100%;
	height: 50vh;
	background: #39caff;
	perspective: 90vmin;
}
section > * {
	grid-area: 1 / 1;
}

*,
* + * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	display: grid;
	place-items: center;
	font-family: "Helvetica", sans-serif;
	font-kerning: normal;
	background: #4d1a7f;
}

.roma {
	opacity: 0.35;
	transition: opacity 0.3s ease, scale 0.3s ease, rotate 10s linear;
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 40px;
	aspect-ratio: 1;
	background-image: url("https://assets.codepen.io/4787486/roma-wheel.png");
	background-size: cover;
	border-radius: 3px;
}
.roma:hover {
	opacity: 1;
	scale: 1.2;
	rotate: 1440deg;
}

gsap.to(".reflection", {
	delay: 1.5,
	duration: 4,
	ease: "elastic.out",
	color: "#6cd8ff",
	rotateX: 180,
	y: "5px"
});