<div class="container">
	<h2>Perspective-origin</h2>
	<div class="row">
		<div class="column">
			<h3>Center (default)</h3>
			<div class="space" data-splitting>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		
		<div class="column">
			<h3>Top left</h3>
			<div class="space space--tl" data-splitting>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</div>
	
	<div class="row">
		<div class="column">
			<h3>Center</h3>
			<div class="space space--y" data-splitting>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		
		<div class="column">
			<h3>Top left</h3>
			<div class="space space--y" data-splitting>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</div>
</div>

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");

* {
	box-sizing: border-box;
}

body {
	font-family: "Open Sans", sans-serif;
	margin: 0;
	padding: 1rem;
	background-color: rgba(16, 26, 41, 1);
	color: white;
}

/* Layout stuff */
.container {
	max-width: 1600px;
	margin: 0 auto;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -1rem;
}

.column {
	margin: 0 1rem;
	width: min(100%, 35rem);
	perspective: 20rem;
	transform-style: preserve-3d;
}

.column:nth-child(2) {
	perspective-origin: top left;
}

/* Transform stuff */
.space {
	position: relative;
	height: 10rem;
	margin: 2rem auto;
	border: 1px solid;
	display: flex;
	align-items: center;
	transform: rotateY(5deg) translate3d(2rem, 0, 0);
	transform-style: preserve-3d;
	counter-reset: item;
}

.space > div {
	--r: calc(var(--item-index) * 90deg / (var(--item-total) - 1));
	width: 5rem;
	height: 5rem;
	margin: 0 0.2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	color: black;
	background: rgba(152, 76, 252, 0.8);
	transform: rotateX(var(--r));
}

.space > div::after {
	counter-increment: item;
	content: counter(item);
}

.space--tl {
	perspective-origin: top left;
}

.space--y > div {
	transform: rotateY(var(--r));
}

Splitting({
	by: 'items'
})