CODEWITHSUNDEEP
htmlcss
Elyor
Elyor

Reputation: 5532

Rotate html special character or text

I have this html character:

<div class="rotate">&#62;&#62;</div>

I want this character facing down, for example.

I found this css, it seems not working.

.rotate{
webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

how to rotate? jsfiddle

Upvotes: 0

Views: 12024

Answers (3)

Douglas Silva
Douglas Silva

Reputation: 345

If you're trying to rotate a span instead you need to change its display property.

.rotate-span {
  display: inline-block;
  transform: rotate(18deg);
}

.rotate-div {
  transform: rotate(-18deg);
}
<div class="rotate-div">&#62;&#62;</div>
<span class="rotate-span">&#62;&#62;</span>

Upvotes: 3

user3119231
user3119231

Reputation: 

.rotate{
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    }

https://jsfiddle.net/pzawLfgz/2/

and notice this:

It is important that after the special imagined to for old browser versions CSS commands generally comes last. This then the browser always delivers the last recognized command and the broadly defined is better than anything that can even slightly differ in their implementation. Therefore, please always structured as follows: from the particular to the general

Upvotes: 1

Shrinivas Pai
Shrinivas Pai

Reputation: 7711

Replace webkit-transform: rotate(-90deg); by-webkit-transform: rotate(-90deg); there was typo you missed -.

Fiddle: https://jsfiddle.net/pzawLfgz/3/

Upvotes: 2

Related Questions