The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

162 Chapter 13

Figure 13-10: Comparing the effects of different values for the

transform-style property

Showing or Hiding the Backface

Sometimes you’ll encounter a situation where the element has been rotated

to such a degree that it faces away from you and you are seeing the “back”

of it (known as the backface). By default, the element behaves as if it were

transparent, so you will see the reverse of what appears on the front. You can

change this by using the backface-visibility property, which has this syntax:

E { backface-visibility: state; }

The state value is one of two keywords: hidden or visible. The default

is visible, which behaves in the way I just described; the alternative, hidden,

shows nothing. These work in the same way as the visibility property,

which you should be familiar with from CSS2.

The following is a quick example illustrating the difference between

the two states by showing two elements that are identical except for their

backface-visibility values. Here’s the code:

.d3-child {

backface-visibility: visible;

transform: rotateY(180deg);

}

.bf-hidden { backface-visibility: hidden; }

You can see the result in Figure 13-11. Both example elements are

rotated around the y-axis so they are facing away from you. The example on

the left shows the element with a value of visible on the backface-visibility

property, so you can clearly see the back of the element. In the example on

the right, you can see... well... nothing. The backface-visibility property

has a value of hidden, so nothing is displayed—no border, no background-color,

nothing. To confirm that the element is actually there, visit the website that

accompanies this book and take a look at the animated code examples so

you can better see how they work.