<div class="container">
  <h2>Transform-style</h2>
  <div class="row">
    <div class="column">
      <h3>Flat</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>Preserve-3d</h3>
      <div class="space space--3d" 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>Flat</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>Preserve-3d</h3>
      <div class="space space--y space--3d" 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;
}

/* 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);
  counter-reset: item;
}

.space--3d {
  transform-style: preserve-3d;
}

.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(252, 43, 193, 0.8);
  transform: rotateX(var(--r));
}

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

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

Splitting({
  by: 'items'
})