CODEWITHSUNDEEP
htmlcss
Marie Beaufort
Marie Beaufort

Reputation: 73

How to rotate individual letters around own axis in CSS?

I am trying to rotate the individual letters of a word around their own axis. Is it possible to achieve this without wrapping each letter, like in the example bellow? 

.word:hover .letter {
  display: inline-block;
  transform: rotateY(-180deg);
}
<h1 class="word">
  <span class="letter">C</span>
  <span class="letter">H</span>
  <span class="letter">E</span>
  <span class="letter">E</span>
  <span class="letter">S</span>
  <span class="letter">E</span>
</h1>

Upvotes: 0

Views: 1153

Answers (1)

DobromirM
DobromirM

Reputation: 2027

You can wrap the text that you want rotated in a span with a specific class and apply a transformation to it.

DEMO:

.rotated:hover
{
  display: inline-block; 
  transform: scale(-1, 1);
  direction:rtl;
  unicode-bidi:bidi-override;
}
<span class='rotated'>CHEESE</span>

Upvotes: 1

Related Questions