CSS rotate text but keep the vertical alignment

Question

I'm creating a website where I use the rotate and transform functions in CSS3. I have everything under control, but when I rotate my text, the whole text rotates like with its <p> block. What I want is when rotating my text, keeping the left side of the text in a vertical alignment.

It's hard to explain with words, so I like to refer to this website: Active Theorie

(You can see that they rotate their text like -2 degrees, but keep the vertical alignment of their texts.)

I hope someone here can help me out with this.

It looks like they use a MASSIVE amount of javascript to generate everything on the fly. — Remy Sheppard, Sep 10 '14 at 14:15
Possible duplicate of http://stackoverflow.com/questions/8600099/vertically-horizontally-align-text-after-css-rotation? — Hidden Hobbes, Sep 10 '14 at 14:27

score 1 · Accepted Answer · answered Sep 10 '14 at 15:18

1

You can use either css "transform: skew" property e.g.

.text {
    transform: skew(0,-10deg);
}

or if you need perspective view you can use "perspective" and "transform: rotateY" properties e.g.

.parentDiv : {
    perspective: 500px;
}
.text: {
    transform: rotateY(30deg);
}

http://jsfiddle.net/yjo3aanr/

answered Sep 10 '14 at 15:18

Vasiliy Gorokhov

246
8
10

This is pretty much what I was looking for! thanks a lot. – Voltiac Sep 10 '14 at 17:57

CSS rotate text but keep the vertical alignment

1 Answers1