How to rotate a letter?

Asked

Viewed 382 times

3

I’m trying to rotate a letter of a word to make it look like the company logo.

This would be the Logo:

inserir a descrição da imagem aqui

Here’s the code I tried to use to rotate

<h1 class="text-center"><span style="color:blue;font-family:Gabriola;font-size:120px; "><b>E</b></span><span style="color:red;"><span style="-webkit-transform: rotate(-90deg);transform: rotate(-90deg);">B</span>yte</span></h1>

and then it was like this:

inserir a descrição da imagem aqui

PS: IT’S JUST THE LETTER B TO SPIN

css rotation style

  • If you want an extra reference from rotate, take a look at the third example here http://answall.com/a/104671/70

1 answer

2


CSS3 Transforms do not work on inline elements, which in your case is a span.

What you can do is add one display: inline-block in the element you want to rotate.

I made the change here:

<h1 class="text-center"><span style="color:blue;font-family:Gabriola;font-size:120px;"><b>E</b></span><span style="color:red;"><span style="transform: rotate(-25deg); display: inline-block;">B</span>yte</span></h1>

  • Thank you so much, man! That’s just what I needed

Browser other questions tagged css rotation style

You are not signed in. Login or sign up in order to post.