The Ranger's CSS Tricks #1: Using Transforms

[Nebulon Ranger]

[ Partially inspired by this thread in Help Desk: HELP - In need of a [div] wizard ]​

CSS is a very powerful thing. If you're like me or @Diana and have been running a website or forum for a reasonable amount of time, chances are you've picked up some interesting design tricks along the way. In a series of threads, I aim to show you, with practical examples, some of these neat tricks. Some won't work on mobile browsers, so just be aware of this when using them.

THE CSS3 TRANSFORM PROPERTY

BROWSER SUPPORT:

IE / EDGE 10+

FIREFOX 16+

CHROME 36+

SAFARI 9+

OPERA PRESTO 12.1+

OPERA WEBKIT 23+

The transform property works on all major browsers and is used to scale, rotate, skew or otherwise modify the orientation of HTML elements (in this case, div elements) in any given document or container. Common applications include using two div elements, one rotated 45 degrees, to make a speech bubble, positioned to the right of a square div element housing a character headshot for roleplay purposes (the exact code for which I will outline below), among other things. It is unknown whether transform and its associated functions work on mobile browsers, so until I can find more information, assume that they do not. For brevity, I'll only cover rotate() in this section. For more in-depth information, go here: CSS3 2D Transforms.

Here's an example; we're going to use transform to make a neat-looking speech bubble.

TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST​

In this example, our speech bubble is composed of two divs; one for the main bubble with a border radius of 15px and a width of 90% and another for our triangle, which is a square element that's been rotated 45 degrees counter-clockwise with transform: rotate(-45deg);, positioned 75 pixels from the top of the lower div with top: 75px; and layered on top with z-index: 10;.

Here's our code:

[div][div=top:75px;float:left;padding:25px;border-top:2px solid #AA0000;border-left:2px solid #AA0000;background:#FF0000;transform:rotate(-45deg);z-index:10;] [/div][div=width:90%float:right;margin:25px;padding:40px;border:2px solid #AA0000;background:#FF0000;border-radius:15px;z-index:9;][center]TEXT[/center][/div]

As you can see, we do the grunt work with CSS3 transforms in the first empty dummy div. We use rotate() here to rotate the reference triangle into position, z-index for layering and absolute position to shove it to where we want it to be. Feel free to experiment with transform and all of its methods on your own if you want!