<h1>
	<span class="hero-text" data-z data-z-layers="8" data-z-depth="0.5em">東京</span>
	<span class="hero-text" data-z data-z-layers="8" data-z-depth="0.5em">日本</span>
</h1>

<script src="https://bennettfeely.com/ztext/js/ztext.min.js"></script>
h1 {
	font-size: 10vw;
	color: #f44336;
	margin: 30px;
}

.z-text {
	transform: rotateY(-15deg);
	transition: transform 1s;
}

.z-layer:not(:first-child) {
	color: #b73229;
}
var ztxt = new Ztextify(".hero-text", {
	direction: "both",
	event: "pointer",
	eventRotation: "35deg"
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.