Course Technology Cengage Learning New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 4

Backfaces

This demo display how to work with backfaces in three dimension. To create a two-sided object, the objects must be placed at the same location. The object representing the backface must be rotated 180° around the y-axis.

After the two objects have been positioned, you can use the backface-visibility property to set whether the backface shows through or not. If backface-visibility is set to hidden the backface does not show through. If backface-visibility is set to visible, the backface will show through into the front face.

Click the [Insert Front Object] and [Insert Back Object] buttons to animate the process of adding the front and back objects to the demo. Use the sliders to rotate the object horizontal and vertical axes. Click the Display Backfaces checkboxes to toggle between displaying and hiding the backface. The CSS code for your choices appears below.

CSS Backfaces


Rotate Card

0deg 360deg
0deg 360deg

HTML

<div id="container" >
     <div id="card" >
          <div id="front" > ... </div>
          <div id="back" > ... </div>
     </div>
</div>

CSS

div#container {
    perspective: 1500px;
}
div#card {
   transform-style: preserve-3d;
   transform: rotateX(0deg) rotateY(0deg);
}
div#front {
   position: absolute; top: 0px; left: 0px;
   backface-visibility: visible;
 }
div#back {
   position: absolute; top: 0px; left: 0px;
   transform: rotateY(180deg);
   backface-visibility: visible;
 }
Michelangelo Sketch

Study for the Battle of Cascina

This card displays a sketch for the painting Battle of Cascina by Michelangelo, in which Florentine soldiers bathing in a river are taken by surprise by the Pisan army. This prepatory sketch of part of the final painting depicts a soldier emerging naked from the river to face the attacking Pisans.

The final painting was destroyed shortly after its completion, so prepatory sketches are all that remain of Michelangelo's vision.

Chalk and silver rod on paper, Galleria degli Uffizi, Florence