Fixing the bug in the circle text animation

I followed the instructions in this tutorial and implemented the following code:

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>

However, I encountered an issue when testing the code on Chrome and Firefox. The curvature effect is not displaying correctly. I attempted to resolve this using Autoprefixer, but it did not solve the problem. Does anyone have any ideas on how to fix this?

Here is the expected look and the actual result when viewed in Safari: https://i.sstatic.net/HxhPl.png

csscss-transforms

Answer №1

You need to ensure that the letters within the span have the CSS property 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can someone please explain how I can implement a multi-submenu feature using JavaScript?

HTML CODES: <header> <nav> <ul> <li class="asmenu"><a href="#">Menu1 <i class="fa fa-caret-down"></i></a> <ul class="submenu deact ...

javascripthtmlcsstogglesubmenu

Is the mobile site displaying CSS pixels in the physical pixel resolution?

I am struggling to grasp the problem and finding it challenging to explain it clearly, so I have attached a picture depicting the issue. https://i.stack.imgur.com/E9Gzj.png My current approach involves using ratios of 100% and 100vw for element widths. D ...

csswebmobile-websitepixel

Divs gracefully appear one after the other in a sequential manner

I am attempting to showcase a sequence of 4 divs in a row using the ease-in CSS transition feature. I came across this example that demonstrates what I am aiming for: http://jsfiddle.net/57uGQ/enter code here. However, despite my best efforts, I am unable ...

htmlcsscss-transitions

Tips for personalizing and adjusting the color scheme of a menu in ant design

I am currently working on a website using reactJs and ant design. However, I have encountered an issue with changing the color of a menu item when it is selected or hovered over. Here's the current menu: Menu Image I would like to change the white col ...

javascriptcssreactjsmenuitemantd

learn the technique I use to incorporate a see-through background in HTML

Is there a way to enclose a specific section of text with a background to improve readability, considering that changing the text color is not the preferred solution due to an existing background image? ...

htmlcss

Tips for aligning content at the bottom center of a design

Could you assist me in positioning the buttons at the bottom center of the horizontal layout as depicted in the image below? Ps: the vertical layout at the top has a dynamic height. My HTML code is as follows: <html> <body> <div class="c ...

htmlcssvaadin

Can anyone help me with integrating a search functionality inside a select tag?

I am working on a select dropdown and want to add a search box to easily filter through the available options. I know this can be done using the chosen library, but I prefer to implement it using plain JavaScript or jQuery. Does anyone have suggestions on ...

javascripthtmljquerycss

Is it possible for a scrollable div to fill the space above a BottomNavigation bar?

My current project involves creating a fixed bottom navigation bar, with a scrollable div above it displaying various card lists. In my attempts to achieve this layout, I consulted both the Material-UI documentation here and here. However, I struggled to ...

cssreactjsmaterial-ui

Altering the color of a div based on a specified value condition

I am in need of assistance with a div structure similar to this: <div id="namacoc" tabindex="1" class="filled-text" placeholder="Input your name" contenteditable ></div> <div id="position" tabindex="1" class="filled-text" placeholder="Input ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to align an element next to another using id or class?

I am looking to align the search element next to either "Media Heading 1" or "Media Heading 2" based on their id/class. For instance: Assume I have an element with the class of "media-item-1" and I aim to position the search div alongside that element us ...

javascriptjquerycsstwitter-bootstrap

Jupyter QtConsole: Customize default CSS by selecting from built-in options in the configuration settings

I am currently using Jupyter on a Windows platform and I am looking to customize the coloring of the QT console. Is there a way to set a default CSS style through a configuration file without having to manually specify it every time? Instead of passing t ...

cssjupyter-console

Using Flexbox CSS to Expand a Box According to its Content Size, Without Impacting Adjacent Rows

Is there a way to make the bottom-most row (highlighted in yellow) expand downward to fill available space? Check out this link for reference: https://jsfiddle.net/darrengates/oucvnfke/ I initially thought using: flex: auto; would solve the issue. Whil ...

javascriptjqueryhtmlcssflexbox

Applying a transparent layer to all slider images, with the exception of the one that is

I am utilizing an IosSlider that is functioning properly, but I am looking to enhance it by adding opacity to all images except for the selected image. This adjustment will make the selected image stand out more and enable users to focus on one image at a ...

javascriptcssiosslideropacity

What is the process for inserting images into a vertical timeline format?

I am currently working on building a timeline and incorporating images into it. I came across a solution on W3 that I'm trying to implement, but I'm facing some challenges. I've been experimenting with the code but I feel like there are part ...

htmlcss

jQuery fails to retain multiple classes when appending elements

Strange things are happening when I use jQuery. I create a string like this: myBlock = """<div class="alert alert-success">...</div>""" But when I try to append it using jQuery, $("#msg_container").append(myBlock) The resulting div in the ...

jquerycssdom

The HTML code does not seem to be acknowledging the CakePHP link

When using Cakephp to generate a link with Html->link, the code looks like this: echo $this->Html->link('Download',array( 'plugin'=> 'galleries', 'controller'=> 'galleries', 'a ...

htmlcsscakephp

The animation did not cause a transition to occur

After creating a search modal triggered by jQuery to add the class -open to the main parent div #search-box, I encountered an issue where the #search-box would fade in but the input did not transform as expected. I am currently investigating why this is ha ...

javascriptjqueryhtmlcss

Are there any Bootstrap 4 classes that have the "cursor:pointer" style other than "btn"?

I am currently utilizing the Bootstrap cards class for my project and I am trying to achieve a cursor pointer effect when hovering over certain cards. However, I prefer not to resort to using the style attribute and only want to utilize Bootstrap classes ...

cssbootstrap-4

switching the color of a path in an SVG when hovering over a

In the midst of working on SVG, I'm trying to implement a color change effect upon hover. The desired functionality is such that when hovering over the .business div, the color of the SVG business path should also change accordingly as specified in th ...

javascriptjqueryhtmlcsssvg

Encountering issues with integrating Sass into Angular 4

Hi there! I recently started a new project in Angular 4 and encountered some issues with the Sass styling. Every time I try to add sass and run the project, I keep getting this error message: body{ h1{ color : red; } } ^ Invalid ...

cssangularsass