Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Making 3D transformations in CSS

Saturday, February 15th, 2014 by Servage

css

In addition to the two-dimensional transform functions, the CSS Transforms spec also describes a system for creating a sense of space and perspective. Combined with transitions, you can use 3-D transforms to create rich interactive interfaces, such as image carousels, flippable cards, or spinning cubes!

The below images shows a few examples of interfaces created with 3-D transforms. In the past, if you saw 3-D interfaces like these, you would assume it was Flash. Now it is native browser capabilities and good old CSS3.

3-D transforms are not a need-to-know skill for folks just starting out in web design, so I’m not going to go into full detail here, but I will give you a taste of what it takes to add a third dimension to a design.

The markup is the same unordered list used in the previous exercise.

<ul>
<li><a href=""><img src="anchovies.jpg" id="img1" alt=""></a></li>
<li><a href=""><img src="jellyfish1.jpg" id="img2" alt=""></a></li>
<li><a href=""><img src="bluejellyfish.jpg" id="img3" alt=""></a>
</li>
<li><a href=""><img src="seadragon.jpg" id="img4"alt=""></a></li>
</ul>

The first step is to add some amount of “perspective” to the containing element using the perspective property. This tells the browser that the child elements should behave as though they are in 3-D space. The value of the perspective property is some integer larger than zero that specifies a distance from the element’s origin on the z-axis. The lower the value, the more extreme the perspective. I have found that values between 300 and 1500 are reasonable, but this is something you need to fuss around with until you get the desired effect.

ul {
width: 1000px;
height: 100px;
list-style-type: none;
padding: 0;
margin: 0;
-webkit-perspective: 600;
-moz-perspective: 600;
perspective: 600;
}

The perspective-origin property (not shown) describes the position of your eyes relative to the transformed items. The values are a horizontal position (left, center, right, or a length or percentage) and a vertical position (top, bottom, center, or a length or percentage value). The default is centered vertically and horizontally (perspective-origin: 50% 50%). The final transform-related property is backface-visibility, which controls whether the reverse side of the element is visible when it spins around.

With the 3-D space established, apply one of the 3-D transform functions to each li within the ul. The 3-D functions include: translate3d, translateZ, scale3d, scaleZ, rotate3d, rotateX, rotateY, rotateZ, and matrix3d. You should recognize some terms in there. The *Z functions define the object’s orientation relative to the z-axis (picture it running from your nose to this page, where the x- and y-axes lie flat on the page).

css3

Obviously, I’m barely scratching the surface of what can be done with 3-D transforms, but it should give you a decent mental model for how it works. Next up, I’ll introduce you to a more sophisticated way to set your web pages in motion.

Resources for further reading

W3 Schools

Site Point

Making 3D transformations in CSS, 3.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.