Frontend Engineering, Volume II

CSS: Example 9h—3D Road Sign

© 2014, Martin Rinehart


Follow these steps. Note the sub-examples on the menu above. Visit them and View Source if you need help.

Create a Page

Use your template to create a page for your billboard-beside-road scene.

Add the following to your style sheet. (You may want to add it to your template.)

    div {
            -ms-transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
    }

Create the Sign

We'll use 2D transforms to get the shape we want. Later we'll apply 3D transforms to these 2D transformed shapes, confident that the underlying affine transforms will magically give us the results we want.

Partial billboard/road scene, Example 9h, CSS knowit.

Your billboard should clearly show the way. We've picked the fictional emerald city of Oz as our destination. You might pick something appropriate to your website project.


Our sign is built from four divs. One, the "sign" div, backs the others. The arrow form is built from two divs, children of "sign." The top half is a skewed rectangle. So is the bottom half, but skewed with a negative angle. Both these have borders, but on just three sides (see border-width below). The fourth covers the arrow but contains only the text. This makes sizing/centering the text quite easy.

Notice also that during construction we like to use a outline: green solid 1px; to see where our underlying div is located. You see that the skews push outside the underlying boundaries.

Create your own arrow sign with two skewed divs inside a parent.

Visit the 9h-1 sub-menu (above) and View Source if you get stuck.

border-width: The border property was specified back when height was vertical, width was horizontal and skewing was unheard of. Before and after skewing, width is a measure of horizontal distance. As a consequence, the skewed borders (left and right, here) will look skinny compared to the orthogonal (horizontal/vertical) ones. Precisely, a 45-degree border, five pixels "wide" (measured horizontally) will be 3.536 pixels "wide" (measured perpendicular to its sides). We use 5-pixel borders top and bottom and 8-pixel borders, left and right, to compensate. If you start writing JavaScript programs, dust off your trigonometry. For now, trust your eyes.

Add the Road

Add the road (the legendary "yellow-brick road" of course) below the sign. Initially it stands on its edge. The center stripe is just another div. (The center stripe is important as the road's lanes are the visual cue that shows the relative size of the sign—it's as tall as two lanes in a two-lane road.)

Partial billboard/road scene, Example 9h, CSS knowit.

Notice that lowercase "z" here and above? We added the font-variant: small-caps; declaration to avoid those squiggles.

Which "z" do you like better?

Finishing Touches

Add legs to help position the billboard. Wrap the sign and road in a scene div, the scene in a perspective div. Rotate the road (rotateX()) into the ground plane. Rotate the scene (rotateY()) to get the effect you like (and to make room for real page content).

Completed billboard/road scene, Example 9h, CSS knowit.

At this stage expect to spend some time fiddling with positions and angles to get the scene you want.

We used a lighter, partially transparent yellow for our final "yellow-brick road."

Ask yourself if you would have any doubt about how to get to Oz if you came on this scene. Ask yourself where you could use a similarly conclusive sign in your website(s).

As Elton John sang, "Good-bye, yellow-brick road."

Feedback: MartinRinehart at gmail dot com

# # #