CSS3 – fun with rotation

by Peter

CSS3 contains a lot of fun stuff. One of the new things is the ability to rotate virtually everything. Most of the major browsers have already implemented it – that is, it is supported in the most recent versions of Firefox, Safari, Opera and Chrome. It is not supported in IE8 (what did you expect?).

Here is a little image of a rotated and skewed box with some rotated texts generated by CSS3 (WordPress doesn’t display it right, so I am using an image, but see also the live demo which also contains the full CSS and markup):

css3-rotated-box-and-text

Here is the essential CSS for the yellow box (repeated for all the various browsers, but the -ms code is useless:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.rotateit {
width:300px; background: yellow; font-size: 16px;
height:300px;
-moz-transform:
translate(250px, 125px)
rotate(30deg)
skew(20deg);
-webkit-transform:
translate(250px, 125px)
rotate(30deg)
skew(20deg);
-o-transform:
translate(250px, 125px)
rotate(30deg)
skew(20deg);
-ms-transform:
translate(250px, 125px)
rotate(30deg)
skew(20deg);
transform:
translate(250px, 125px)
rotate(30deg)
skew(20deg); }

You can use the code in the demo and play with it. It is quite interesting.

A couple of things are well worth noticing: (1) Even though all other div’s and p’s are inside the containing div, they can easily end up outside it – they will overflow, in other words, and the box that contains them does not expand correspondingly. (2) As you can see, elements overwrite one another as well as expanding outside the box, meaning that rotated elements behave like absolutely positioned ones.

Have fun!

Related Posts:

Leave a Comment