![]() ![]() * position faces absolutely so that they stack on top of each other */ * allow child elements to be positioned in 3D space of their own */ The CSS with comments explaining each step is the following: In the live demo below, you can see this example live. We’re going to apply the backface-visibility property to these two elements, and then when the container is hovered, the two elements are going to be rotated in three-dimensional space, thus showing the “other side of the card”. The markup consists of a container that contains two elements that we’re going to stack on top of each other, back-to-back. In this example, we’re going to create a card flip example using the backface-visibility property. See the Live Demo section below for a live example. ![]() It is also useful when creating cubes in the three-dimensional space. Without this property, the front and back elements could switch places at times during an animation to flip the card. When the card is flipped, you wouldn’t want the content of the front face to be visible through the back face. This property is useful when you place two elements back-to-back, as you would to create a playing card. It has no effect on two-dimensional transforms. For example, applying a rotation about the y-axis of 180° (for instance) would cause the back side of the element to face the viewer. It is used in conjunction with CSS transforms when an element is rotated in three-dimensional space so that its front face no longer faces towards the screen, and its back face is facing it instead. The back face of an element usually has a transparent background, letting, when visible, a mirror image of the front face be displayed. The backface-visibility property determines whether or not the “back” side of a transformed element is visible when facing the viewer. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |