CSS reference manual

CSS @rules (RULES)

CSS attributes in full

CSS background Property CSS3 Animation-Timing-function Attribute

CSS3 Backface-Usage and examples of visibility property

CSS3of backface-The visibility property determines whether the 'back' of the transformed element is visible to the user when facing.

The following table summarizes the usage context and version history of this property.

Default value:	visible
Applies to:	Transformable elements
Inheritance:	None
Animatable:	No.See also Animation properties.
Version:	CSS3New feature
JavaScript syntax:	object.style.backfaceVisibility="hidden"

Backface-The usage syntax of visibility

The syntax of this property is as follows:

Backface-visibility: visible | hidden | initial | inherit

The following example demonstrates how to use backface-visibility attribute.

Example

.flip-container {
　　　　　　　　margin:　50px;
　　　　　　　　perspective:　1000px;
　　　　　　　　display: inline-block;
　　　　}
　　　　.flip-container:hover .card {
　　　　　　　　transform: rotateY(180deg);
　　　　}
　　　　.card, .front, .back {
　　　　　　　　width:　130px;
　　　　　　　　height:　195px;
　　　　}
　　　　.card {
　　　　　　　　position: relative;
　　　　　　　　transition: 0.5s all;
　　　　　　　　Transform-style: preserve-3d;
　　　　}
　　　　.front, .back {
　　　　　　　　position: absolute;
　　　　　　　　Backface-visibility: hidden;
　　　　}
　　　　.front {
　　　　　　　　z-index:　1;
　　　　　　　　transform: rotateY(180deg);
　　　　}
　　　　.back {
　　　　　　　　z-index:　2;
　　　　　　　　transform: rotateY(0deg);
　　　　}

Test and see‹/›

Note:Backface-The visibility attribute is very useful for creating animations such as rotating coins or card flips, where two different images (i.e., front and back) are mixed together to create a better3D Rotation Effect.

Attribute Value

The following table describes the value of this attribute.

Value	Description
visible	Specify that the back is visible, allowing the front mirror to display. This is the default value.
hidden	Specify that the back is not visible, hiding the front.
initial	Set this attribute to its default value.
inherit	If specified, the associated element adopts its parent element's backface-Calculated value of the visibility attribute.

Browser Compatibility

Backface-Browser compatibility of the visibility attribute, all mainstream browsers support this attribute.

	Firefox 10+ ^-moz-,16 + Google Chrome 12+ ^-webkit-,36+ Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 15+ ^-o-,23+ ^-webkit-