How to Rotate and Flip Text using CSS3

Once upon a time there lived an old CSS. She was the queen of the country “Web”. She was so old that she couldn’t rotate text, so if anybody needed to, he’d have to use an image instead of plain text. But then CSS gave birth to a strong daughter, CSS3!

Princess CSS3 was so strong and powerful that it could do many things the old queen was never able to, such as rotating and flipping text. They made CSS3 the new queen and everybody lived happily ever after.

View Demo

HTML Code

1
2
3
4
5
<div class="box"><span class="designzzz">Designzzz</span></div>
<div class="box"><span class="coding">Coding</span>
<span class="wordpress">WordPress</span></div>

CSS Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
.box
{
background:#f4f4f4;
border-radius: 5px 5px 5px 5px;
height: 160px;
width: 200px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #000;
}
.designzzz
{
color: #F90;
float: left;
font-size: 30px;
margin-left: 14px;
}
.coding
{
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
color: #336;
float: left;
font-size: 27px;
margin-left: 11px;
}
.wordpress
{
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
color: #CC0000;
float:right;
font-size: 28px;
}

View Demo

Advertisement

Connect with us!


Leave a Reply

Site Stuff

Powered by:

Designzzz.com