CODEWITHSUNDEEP
csscss-transforms
Anna_B
Anna_B

Reputation: 890

Circle text animation bugfixing

I worked with this tutorial, and coded this:

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;
}

.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 class="circle" data-splitting>
  Circle-Text-Animation-Effects-
</div>

Unfortunately, I realized that it doesn't work with Chrome and Firefox. They don't show the curvature. I tried to fix it with Autoprefixer, but it didn't help. Has anyone an idea how to solve this issue?

Here is how it should look like, and how it looks like with Safari: enter image description here

Upvotes: 0

Views: 394

Answers (1)

Temani Afif
Temani Afif

Reputation: 272806

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 class="circle" data-splitting>
  Circle-Text-Animation-Effects-
</div>

Upvotes: 1

Related Questions