HTML and CSS Reference
Figure 13-5 The Cool Shoes & Socks page zoomed out to show the sidebar moves toward the viewer when hovered
When creating 3D effects, if you are declaring more than one translate function, instead of specifying trans-
lateX() , translateY() , and translateZ() , you can use the shorthand function translate3d() , which
takes three arguments: the X axis, Y axis, and Z axis, in that order.
rotateX(), rotateY(), rotateZ(), and rotate3d()
In the preceding chapter where you manipulated elements in two dimensions, you rotated the “25% Off” banner us-
ing the rotate() function.
When rotating in 2D, elements can be rotated only clockwise or counterclockwise. Now that the main content con-
tainer is a 3D space, any elements within it can be rotated not just in 2D but in 3D too, either rotated on the X, Y, or
Z axis, or a combination.
Now rotate the sidebar of the Cool Shoes & Socks page.
1. In styles.css, find the .sidebar rule set and add the following declaration: