CSS backface-visibility property

Description

CSS backface-visibility determines whether the infomation should be visible at the back face of an element. We can see the back face of card when it is rotated by 180 degrees.

This property is useful when we want to make a playing card. In this case, we have to place two elements back to back.

Please hover the mouse over the element to see the effect of the following values.

Syntax

backface-visibility : none | length

Property values

visible Default: The back face is visible when it is rotated by 180 degrees.; backface-visibility: visibile;
Try it
hidden: The back face is not visible when it is rotated by 180 degrees.; backface-visibility: hidden;
Try it

Applicable to

It applies to transformable elements.

Preview

Code

CSS

.parentElement{
 perspective:300px;
 position:relative;
}

.element{
 width:100px;
 height:100px;
 position:absolute;
 background-color:lightblue;
 transition:transform 2s;
}


.element:hover{
transform:rotateY(180deg);
}

HTML

<div class="parentElement">
<div class="element">
		We are learning backface-visibility property.
	</div>
</div>

CSS3 Properties

Description

Syntax

Property values

Applicable to