HTML and CSS Reference
In-Depth Information
Figure 13-5
The Cool Shoes & Socks page zoomed out to show the sidebar moves toward the viewer when hovered
over.
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:
