CodePudding user response:
There is an extra span around your letters that need to have transform-style: preserve-3d;
Splitting();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: grey;
}
.circle {
transform-style: preserve-3d;
animation: animate 8s linear infinite;
}
/* added this */
.circle > span {
transform-style: preserve-3d;
display: block;
}
/**/
.circle .char {
position: absolute;
top: 0;
left: 0;
background: blue;
color: red;
font-size: 4em;
padding: 5px 12px;
border-top: 4px solid black;
border-bottom: 4px solid black;
transform-style: preserve-3d;
transform-origin: center;
transform: rotateY(calc(var(--char-index) * 12deg)) translateZ(250px);
}
@keyframes animate {
0% {
transform: perspective(1000px) rotateY(360deg) rotateX(15deg);
}
100% {
transform: perspective(1000px) rotateY(0deg) rotateX(15deg);
}
}
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<div data-splitting>
Circle-Text-Animation-Effects-
</div>