Rotating text with CSS transform


show more Rotating text with CSS transform provides you with in-depth training on Web. Taught by Joseph Lowery as part of the Typography with CSS in Dreamweaver show less
please wait ...

Rotating text with CSS transform

As CSS expands its technical proficiency, more dynamic possibilities emerge. With the CSS3 Transform features you can move page elements, scale them and as you're about to see, even rotate them. Web pages aren't just for 90 degree rectangles anymore. Let me demonstrate the type of effect that you can get by switching to the final example page, so keep your eye on these two callouts here. When I switch to the final page, they rotate counterclockwise and I'd even add a little drop shadow just to make them really pop.

Alright, let's take a look and let me show you how it's done. So I do have open here the mission.htm file located in the Chapter 6 > 06_03 folder, and the first thing I want to do is identify my callouts here. So I'll put my cursor in there and I can see I have a callout with an ID of trivia and if I put my cursor in the one on the right, there is also a div with the ID of join. So I'm going to want to create a CSS rule that targets both of these...

Rotating text with CSS transform
Video duration: 6m 24s 2h 30m Intermediate

Viewers:

Rotating text with CSS transform provides you with in-depth training on Web. Taught by Joseph Lowery as part of the Typography with CSS in Dreamweaver

Subject:
Web
Software:
Dreamweaver
Author:
please wait ...