Transforming Elements with CSS

Transforming elements in CSS refers to the modification of their coordinates, in order to translate (move), rotate, scale (size), or skew (distort) them. Transformation can be in a 2D or 3D space. The 2D space is described in terms of two dimensions: horizontal (the x-axis) and vertical (the y-axis); while the 3D space in three dimensions: horizontal (the x- axis), vertical (the y-axis), and depth (the z-axis). The z-axis can be seen as an imaginary line that comes out of the screen that is perpendicular (at 90°) to it. The two main properties used to achieve transformation are transform- origin and transform. The properties used to enhance the perception of 3D include transform-style and backface-visibility.

1. transform-origin

The transform-origin property is a non-inherited property that allows you to specify the origin for the transformation of an element and used with the transform property. The position of the origin has an effect on the result of a transform operation. By default, the origin of an element is at its center. Table 11.1 lists the values the property supports.

2. transform

The transform property allows you to specify how the coordinates of an element should be modified. It is non-inherited and the values it supports are the none keyword and transform-functions, which allow various types of transformations to be specified. Table 11.2 lists the functions supported. Multiple functions can be specified in a list of space-separated values.

TABLE 11.2

Values for the transform Property

2.1. Applying Rotation and Skewing

Figure 11.1 shows how the rotate() and skew() functions are used and Figure 11.2 the result. The div{} rule styles all the boxes in the same way (using properties already discussed in the chapter) and uses the display:inline-block declaration to place them on the same line. The text- align:center declaration centers the text in the boxes and, again, is discussed more fully in Chapter 14. The #box2{} rule rotates the second <div> element clockwise around the z-axis by 45°. The #box3{} rule skews the third <div> element along the x-axis by 30° by moving its points by amounts equivalent to the angle.

Figure 11.3 shows the effect of setting the transform-origin property to 0px 0px (i.e., top left corner of an element). This is done by adding transform-origin: 0px 0px; to the #box2{} rule in Figure 11.1.

2.2. Applying Perspective

Figure 11.4 shows how the perspective() function is used to create perspective and Figure 11.5 the effect. In the example, the #box1{} rule styles the outer <div> element. The #box2{} rule specifies the width and height of the inner <div> element as 50% of that of the outer one and the padding extends the size. The perspective() gives the element depth and rotateY() rotates it around the y-axis by 50° to make the perspective show.

3. perspective

The perspective property is a non-inherited property and used to specify the distance between the user and the z =0 plane (i.e., vertical plane through the origin) so as to give perspective to a 3D-positioned element and create the sense of depth. The smaller the distance, the greater the perspective produced. Note that the property performs a different function from the transform property’s perspective() function described in Table 11.2 and does not give perspective to individual elements, but to the children of an element as a single unit. This means that it is applied to a parent element not the child elements. The vanishing point, which is the point at which parallel lines meet, is by default at the center of the parent element, but can be changed using the perspective-origin property. Figures 11.6 and 11.7 show an example of usage and Figure 11.8 the result.

The example uses both the perspective property and the perspective() function for comparison. The .parent{} rule styles the two parent <div> elements. The .parent.perspective{} rule gives perspective to the element whose class attribute is equal to a list of space-separate values that includes “parent” and “perspective.” Notice that there is no white space between .parent and .perspective selectors, since they are part of a list of space- separate class values. The .parent .perspective .child{} rule rotates all elements of “child” class around the x-axis by 30°. Notice that there is a space between .parent .perspective and .child. This is because “child” is not part of a list of space-separated class values. The .child{} rule styles each element of “child” class and changes them to inline-block elements to display them on the same line. The .parent.transform .child{} rule specifies perspective and rotation values for each element that is of “parent transform” class and also of “child” class.

3.1. Example Application of the perspective Property

Figures 11.9 through 11.11 show a basic but practical application of the perspective property, in which images are displayed, usually for the user to click and be linked to another page.

In the example, the *{} rule says not to let any specified value of padding or border affect the size of any element. This ensures that the sizes of the elements are adjusted to fit inside the specified size for their container element and not wrapped to the next line. The .wrapper{} rule specifies the width, margin, and perspective of the <div> element of “wrapper” class, and the .inner{} rule rotates the <div> element of “inner” class around the y-axis by 40°, thereby rotating the <figure> elements and their contents. The .inner figure{} rule specifies the width of each <figure> element, the padding between them and the edges of the <figure> elements, the margin between the images, the gold background, and displays the images as if they are both inline and block elements. The .inner img{} rule specifies that the width of each image must not exceed the one specified for the parent element (i.e., the <figure> element). The .inner figcaption{} rule styles the image captions. The src attributes specify the names and locations of the images.

4. transform-style

The transform-style property allows you to specify whether the children of an element should be displayed in 3D or in the same plane as the element (i.e., flat). It is non-inherited and supports two values: preserve-3d (which displays children in the 3D space) and flat, the default (which displays children in the same plane as the parent). Figure 11.12 shows their effects. A more detailed demonstration of how the property is used is shown later in Figures 11.15 and 11.16, along with related properties.

5. backface-visibility

The backface-visibility property is non-inherited and used to specify whether or not the backface of an element should be visible, making it look as if it is being reflected in a mirror. The values supported are visible (which makes the backface of an element visible) and hidden (which makes the backface of an element invisible). Figure 11.13 shows an illustration of the effects of these values and Figure 11.14 their effect with a 3D shape.

5.1. Full Explanation of the Cube Example

Figures 11.15 and 11.16 show the codes for the cube, and Figure 11.17 shows the cube again. The .cube{} rule builds the container for the faces of the cube. It specifies the size (width and height), centers it (with margin), rotates it to show its 3D features properly (using transform rotate functions), gives it perspective (with perspective-origin and perspective), and makes it display as 3D (with transform-style). The .face{} rule styles the <div> elements that represent the faces. It gives them absolute positions to ensure that all have the same top-left position, specifies the size of the faces, the font size, leading, alignment, and color of the text, and also styles the border of the faces and specifies the backface visibility. The .one{}, .two{}, .three{}, .four{}, .five{}, and .six{} rules rotate and move the faces to the respective positions. Notice that the widths and heights of the faces are twice the amount by which they are translated.