3D Animation in CSS

3D animation can probably be best simplistically described as adding a third dimension (i.e., depth) to the movement of a 2D or 3D object. Movement can be along x-, y-, or z-axis and around these axes. This means 3D animation has what is described as six degrees of freedom, which is the ability to move forward/backward, up/down, left/ right (i.e., along x-, y-, z- axis), plus yaw, pitch, and roll, as illustrated in Figure 18.13. The terms “yaw,” “pitch,” and “roll” essentially define the orientation of an object within a 3D space.

  • Yaw is rotation around y-axis (i.e., left-right orientation). An example is when the head is being turned left or right.
  • Pitch is rotation around x-axis (i.e., up or down orientation). An example is when the head is being nodded or thrown back.
  • Roll is rotation around z-axis (i.e., side to side). An example is when the head is being cocked left or right.

FIGURE 18.13 An illustration of the six degrees of freedom in 3D animation

1. CSS 3D Animation

The various CSS properties introduced so far, such as transform and perspective, can be animated to produce all the degrees of freedom required in 3D animation. Figures 18.14 and 18.15 show an example of how this is achieved and Figure 18.16 shows the result. The animation is basic and involves a banner rotating within the frame that holds it.

Notice that the example uses many properties already discussed in to style the <div> elements. The #container{} rule styles the outer <div> element of id=“container”. In the rule, the width property specifies the width (but the height is left to be determined by the inner <div> element), margin specifies the space between the element and the edge of the page (i.e., <body> element), background-color specifies the background color, border says to make the border 2px-thick solid line and black, border-radius makes the corners round, and perspective says to give perspective to the child elements of element (i.e., <div> element of id=“banner”) that are 3D- positioned, so as to create the sense of depth. An element is 3D-positioned if its positioning involves the y-axis.

The #banner{} rule styles the <div> element of id=“banner”. The width and height properties set the size, margin centers it horizontally inside the parent <div> element (i.e., id=“container”), background-color sets the background color, border sets the border to black 2px-thick solid line, and border-radius makes the corners round. For the animation, the animation- name specifies the name of the animation as “rotation,” animation-timing- function specifies linear motion, animation-duration sets the length of the animation sequence to 6 seconds, and animation-iteration-count says to play the animation indefinitely.

The p{} rule styles the text in the <p> element. The font property makes the text bold, 32px in size, and Arial, text-align centers it horizontally, and margin centers it vertically. The @keyframes rotation{} at-rule creates the “rotation” animation and says to rotate the element to which the rotation animation applies around the y-axis to 0° at 0% keyframe and 360° at 100%.

1.1. An Example Application of 3D Animation

Figures 18.17 and 18.18 show the implementation of a 3D image carousel and Figure 18.19 shows a snapshot of it in operation. The example is adapted from http://www.the-art-of-web. com and creates a carousel of images that goes round and round.

In the #carousel img{} rule in the example, the position property absolutely positions all <img> elements to remove them from normal flow and places them at the default position at the top-left corner of the page. From there they can be rotated and moved as required to create the shape of the carousel. The border property makes the border of each element 1px- thick solid line and light grey, background-color makes the background color rgba(255,255,255,0.7), and width and height set the size.

The #imagel{}, #image2{}, #image3{}, #image4{}, and #image5{} rules each rotates the corresponding <img> element around y-axis and moves it right along the x-axis to a new position as well as gives it left padding so that the contained image is at the right end of the element’s box. The angles by which the elements are rotated from their initial orientation are multiple of 72 (which is derived from dividing 360° by the total numbers of images). Note that rotation must be specified before translation, because doing it the other way round will give a different result.

In the #wrapper{} rule, the perspective property gives perspective to the child elements of the <div> element of id=“wrapper”, padding extends the left edges of the <img> elements by the same amount so that they meet at the central axis, and height produces the indirect effect of tilting the carousel up. The higher the value, the more the carousel is tilted up.

The #carousel{} rule sets the animation properties for the <div> element of id-‘carousel . The animation-name property specifies the name (“carousel”), animation-duration sets duration of animation to 7 seconds, animationtiming-function sets motion type to linear, transform-style says to display the child elements of the element in 3D space, and transform-origin specifies the x-y-z coordinates of the point of rotation for the element, which is where the <img> elements meet. The @keyframes carousel{} at- rule creates the carousel animation and says to rotate the element to which carousel animation applies 0° around y-axis at 0% keyframe and -360° at 100%.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *