CSS Backface-Visibility A Comprehensive Guide

Introduction

The backface-visibility property in CSS controls whether the back face of an element is visible when it is rotated. This is particularly useful for 3D transformations, where elements can be flipped or rotated to show their back sides. This feature is widely supported and has been available since March 2022.

Compatibility and Browser Support

The backface-visibility property is supported across many devices and browser versions, making it a reliable tool for web developers and designers. It has been available since March 2022 and is compatible with a broad range of browsers.

Browser Compatibility

• Google Chrome: Supported since version 36.0 (July 2014)
• Mozilla Firefox: Supported since version 16.0 (October 2012)
• Internet Explorer/Microsoft Edge: Supported since version 10.0 (September 2012)
• Opera: Supported since version 23.0 (July 2013)
• Safari: Supported since version 9.0 (September 2015)

The widespread support for backface-visibility ensures that your web designs will work consistently across different platforms and browsers. This makes it a valuable tool for creating interactive and dynamic web experiences, especially with 3D transformations.

Description

The backface-visibility property in CSS controls whether the back face of an element is visible when it is rotated in 3D space. This property is useful for scenarios where elements are flipped or rotated, such as in 3D transformations.

An element’s back face is a mirror image of its front face. While it is invisible in a typical 2D layout, it can become visible when the element is rotated using 3D transformations. This property does not affect 2D transforms, which lack perspective.

By setting the backface-visibility property, you can decide whether the back face of an element should be shown or hidden when the element is turned towards the user. This capability is crucial for creating interactive and dynamic web designs, such as flipping cards, 3D carousels, and other visually engaging effects.

Syntax

The backface-visibility property in CSS specifies whether the back face of an element is visible when it is rotated in 3D space. Here’s the syntax:

Syntax

/* Keyword values */
backface-visibility: visible;
backface-visibility: hidden;

/* Global values */
backface-visibility: inherit;
backface-visibility: initial;
backface-visibility: revert;
backface-visibility: revert-layer;
backface-visibility: unset;

Explanation

• visible: The back face is visible when the element is turned towards the user. This is the default value.
• hidden: The back face is hidden, making the element invisible when turned away from the user.
• inherit: The element inherits the backface-visibility value from its parent element.
• initial: The property is set to its default value, which is visible.
• revert: The property is reset to its inherited value if it inherits, or to the initial value if not.
• revert-layer: The property is reset to the value established by the user agent’s stylesheet originating from the browser’s default style declarations.
• unset: The property is reset to its natural value, which means that if it’s already inherited, it will inherit, and if not, it will be set to the initial value.

Values

The backface-visibility property in CSS accepts several values that determine the visibility of an element’s back face when it is rotated in 3D space.

Values

visible

• Description: The back face of the element is visible when it is turned towards the user.
• Usage: This is the default value and is used when you want the back face to be seen during 3D transformations.

backface-visibility: visible;

hidden

• Description: The back face of the element is hidden, making the element effectively invisible when it is turned away from the user.
• Usage: This value is used when you want to hide the back face, creating effects like flipping cards or rotating elements without showing the back side.

backface-visibility: hidden;

inherit

• Description: The element inherits the backface-visibility value from its parent element.
• Usage: This value is useful when you want to maintain consistency in the visibility of back faces across nested elements.

backface-visibility: inherit;

initial

• Description: The property is set to its default value, which is visible.
• Usage: This value can be used to reset the backface-visibility property to its initial state.

backface-visibility: initial;

revert

• Description: The property is reset to its inherited value if it inherits, or to the initial value if not.
• Usage: This value is useful for reverting the property to a previous state, ensuring consistency across styles.

backface-visibility: revert;

revert-layer

• Description: The property is reset to the value established by the user agent’s stylesheet originating from the browser’s default style declarations.
• Usage: This value is used to revert the property to the browser’s default style, which can be useful for maintaining consistent default behaviors.

backface-visibility: revert-layer;

unset

• Description: The property is reset to its natural value, which means that if it’s already inherited, it will inherit, and if not, it will be set to the initial value.
• Usage: This value is useful for resetting the property to a natural state, ensuring that it behaves as expected in various contexts.

backface-visibility: unset;

Formal Definition

The backface-visibility property in CSS is formally defined with specific initial values, applicability, inheritance, computed values, and animation types.

Formal Definition

• Initial Value: visible
  • The back face of an element is visible by default when it is turned towards the user.
• Applies To: Transformable elements
  • This property can be applied to any element that can be transformed using CSS transforms.
• Inherited: No
  • The backface-visibility property is not inherited from parent elements. Each element must have its own value specified.
• Computed Value: As specified
  • The computed value of backface-visibility is the same as the specified value.
• Animation Type: Discrete
  • The property does not support smooth transitions between states; it changes abruptly.

Formal Syntax

backface-visibility =
  visible |
  hidden

• visible: The back face is visible when the element is turned towards the user.
• hidden: The back face is hidden, making the element effectively invisible when turned away from the user.

Examples and Use Cases

The backface-visibility property is incredibly useful for creating interactive and visually appealing web designs. Here are some practical examples and use cases to demonstrate how you can effectively implement this property in your web projects.

Basic Example: Flipping a Card

One of the most common use cases for the backface-visibility property is creating a flipping card effect. This can be used for interactive elements like flashcards, product displays, or any other element that needs to show different content on its front and back faces.

HTML

<div class="flip-container">
  <div class="flipper">
    <div class="front">Front Side</div>
    <div class="back">Back Side</div>
  </div>
</div>

CSS

.flip-container {
  perspective: 1000px;
}

.flipper {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 1px solid #ccc;
}

.front {
  background-color: #ffcc00;
}

.back {
  background-color: #00ccff;
  transform: rotateY(180deg);
}

.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

Interactive Example: 3D Cube

Another use case for the backface-visibility property is creating a 3D cube. This can be used for educational purposes, 3D modeling, or any other interactive 3D element.

HTML

<div class="cube-container">
  <div class="cube">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</div>

CSS

.cube-container {
  perspective: 1000px;
}

.cube {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotateCube 5s infinite linear;
}

.face {
  position: absolute;
  width: 100px;
  height: 100px;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 1px solid #ccc;
}

.front {
  background-color: #ffcc00;
  transform: translateZ(50px);
}

.back {
  background-color: #00ccff;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background-color: #ff6666;
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background-color: #66ff66;
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background-color: #6666ff;
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background-color: #ff66ff;
  transform: rotateX(-90deg) translateZ(50px);
}

@keyframes rotateCube {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

Practical Use Case: Interactive Product Display

For e-commerce websites, the backface-visibility property can be used to create interactive product displays that allow users to view different angles or details of a product.

HTML

<div class="product-container">
  <div class="product">
    <div class="front">Product Front</div>
    <div class="back">Product Back</div>
  </div>
</div>

CSS

.product-container {
  perspective: 1000px;
}

.product {
  width: 300px;
  height: 400px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.product .front,
.product .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 1px solid #ccc;
}

.product .front {
  background-color: #ffcc00;
}

.product .back {
  background-color: #00ccff;
  transform: rotateY(180deg);
}

.product-container:hover .product {
  transform: rotateY(180deg);
}

Conclusion

The backface-visibility property is a powerful tool for creating interactive and visually appealing web designs. By controlling the visibility of the back face of elements, you can create engaging effects like flipping cards, 3D cubes, and interactive product displays. Whether you’re a web developer or designer, understanding and utilizing this property can greatly enhance the user experience of your web projects.

Specifications

The backface-visibility property is defined in the CSS Transforms Module Level 2 specification. This specification outlines the behavior and usage of the property, ensuring consistency across different browsers and platforms.

CSS Transforms Module Level 2

• Specification: CSS Transforms Module Level 2
• Status: Working Draft
• Editors: Dean Jackson (Apple), Simon Fraser (Apple), Aryeh Gregor (Google)

FAQs

What is the backface-visibility property in CSS?

The backface-visibility property in CSS controls whether the back face of an element is visible when it is rotated in 3D space. This property is particularly useful for 3D transformations, where elements can be flipped or rotated to show their back sides.

What are the values for the backface-visibility property?

The backface-visibility property accepts the following values:

• visible: The back face is visible when the element is turned towards the user.
• hidden: The back face is hidden, making the element effectively invisible when turned away from the user.
• inherit: The element inherits the backface-visibility value from its parent element.
• initial: The property is set to its default value, which is visible.
• revert: The property is reset to its inherited value if it inherits, or to the initial value if not.
• revert-layer: The property is reset to the value established by the user agent’s stylesheet originating from the browser’s default style declarations.
• unset: The property is reset to its natural value, which means that if it’s already inherited, it will inherit, and if not, it will be set to the initial value.

How do I use the backface-visibility property?

To use the backface-visibility property, you can specify one of the keyword values in your CSS. For example:

.element {
  backface-visibility: hidden;
}

This will hide the back face of the element when it is rotated in 3D space.

What is the default value for the backface-visibility property?

The default value for the backface-visibility property is visible. This means that the back face of an element is visible by default when it is turned towards the user.

Is the backface-visibility property supported in all browsers?

The backface-visibility property is widely supported across many devices and browser versions, including Google Chrome, Mozilla Firefox, Internet Explorer/Microsoft Edge, Opera, and Safari. The widespread support ensures that your web designs will work consistently across different platforms and browsers.

Related Properties

transform

The transform property in CSS is used to apply 2D or 3D transformations to an element. This property works in conjunction with the backface-visibility property to create interactive and dynamic effects.

Syntax

transform: none | <transform-function> [<transform-function>]*

Example

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

transform-style

The transform-style property in CSS specifies how nested elements are rendered in 3D space. This property is often used with the backface-visibility property to create complex 3D transformations.

Syntax

transform-style: flat | preserve-3d

Example

.element {
  transform-style: preserve-3d;
}

perspective

The perspective property in CSS defines the distance between the viewer and the Z=0 plane. This property is used to create the illusion of depth in 3D transformations.

Syntax

perspective: none | <length>

Example

.element {
  perspective: 1000px;
}

By understanding and utilizing these related properties, you can create even more dynamic and engaging web designs.

Conclusion

The backface-visibility property is a powerful tool for controlling the visibility of the back face of elements in 3D transformations. By using this property, you can create interactive and visually appealing web designs that enhance the user experience. Whether you’re a web developer or designer, understanding and implementing the backface-visibility property can greatly benefit your web projects.

In this article, we covered the description, syntax, values, formal definition, examples, use cases, specifications, FAQs, and related properties of the backface-visibility property. By combining these elements, you can effectively use the backface-visibility property to create engaging and dynamic web designs.

CSS Transforms Module Level 2: backface-visibility Property

The CSS Transforms Module Level 2 specification outlines how the backface-visibility property works. This property controls whether the back face of an element is visible when it’s rotated in 3D space.

Key Points

• Property Definition: The backface-visibility property determines if the back face of an element shows when it’s rotated.
• Values: It accepts visible and hidden values, as well as global values like inherit, initial, revert, revert-layer, and unset.
• Applicability: Applies to elements that can be transformed using CSS transforms.
• Initial Value: The default value is visible.
• Inheritance: Not inherited from parent elements.
• Computed Value: Same as the specified value.
• Animation Type: Supports discrete animations, which means it changes abruptly without smooth transitions.

Importance of the Specification

The CSS Transforms Module Level 2 specification ensures that the backface-visibility property behaves consistently across different browsers. This is crucial for web developers who rely on this property for interactive and visually appealing designs.

How to Stay Updated

To stay updated with the latest developments in the CSS Transforms Module Level 2 specification, refer to the official documentation provided by the CSS Working Group.

Example

Here’s a simple example of how to use the backface-visibility property to create a flipping card effect:

HTML

<div class="card-container">
  <div class="card">
    <div class="front">Front Side</div>
    <div class="back">Back Side</div>
  </div>
</div>

CSS

.card-container {
  perspective: 1000px;
}

.card {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.card .front,
.card .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 1px solid #ccc;
}

.card .front {
  background-color: #ffcc00;
}

.card .back {
  background-color: #00ccff;
  transform: rotateY(180deg);
}

.card-container:hover .card {
  transform: rotateY(180deg);
}

In this example, the card flips to reveal its back side when hovered over. The backface-visibility: hidden; property ensures that the back face is not visible when the card is turned away from the user.

FAQs

What is the backface-visibility property in CSS?

The backface-visibility property determines whether the back face of an element is visible when it is rotated. It’s commonly used in 3D transformations.

What values can be used with the backface-visibility property?

• visible: The back face is visible when the element is rotated (default).
• hidden: The back face is not visible when the element is rotated.
• inherit: Inherits the value from the parent element.
• initial: Sets the property to its default value, which is visible.
• revert: Resets the property to its inherited value if it inherits, or to the initial value if not.
• revert-layer: Resets the property to the value established by the user agent’s stylesheet.
• unset: Resets the property to its natural value.

How is backface-visibility used with 3D transforms?

The backface-visibility property is often used with 3D transforms, like transform: rotateY(180deg);. If set to hidden, the back face will not show when the element is flipped.

What is the default value of backface-visibility?

The default value is visible, meaning the back face of the element is visible when rotated.

Why isn’t my backface-visibility property working?

Common issues include not applying a 3D transformation or the element not being fully rotated. Ensure that transform-style: preserve-3d; is applied if working with nested elements in a 3D context.

Can the backface-visibility property be animated?

The backface-visibility property does not support smooth transitions between states; it changes abruptly. The animation type is discrete.

Is backface-visibility compatible with all browsers?

The backface-visibility property is widely supported across many devices and browser versions. It has been available since March 2022 and is compatible with a broad range of browsers, including Google Chrome, Mozilla Firefox, Internet Explorer/Microsoft Edge, Opera, and Safari.

How can I check the compatibility of backface-visibility in different browsers?

You can check the compatibility of the backface-visibility property in different browsers by referring to the browser compatibility table provided in this article or by visiting the official MDN Web Docs page for the property.

What are some common use cases for the backface-visibility property?

Some common use cases for the backface-visibility property include creating flipping card effects, 3D cubes, interactive product displays, and other visually engaging elements that require 3D transformations.

Where can I find more information about the backface-visibility property?

For more information about the backface-visibility property, refer to the CSS Transforms Module Level 2 specification or the official MDN Web Docs page for the property.

Are there any related properties to backface-visibility?

Yes, there are several related properties to backface-visibility, such as transform, transform-style, and perspective. These properties are often used together to create 3D transformations and interactive effects in web designs.

Related Properties and Further Reading

Understanding related properties and exploring further reading can help you expand your knowledge and enhance your web development skills.

Related Properties

• transform: Applies various transformations to an element.

  transform: rotateY(180deg);

• transform-style: Determines whether the children of an element are positioned in the 3D space.

  transform-style: preserve-3d;

• perspective: Defines the distance between the user and the z=0 plane.

  perspective: 1000px;

• backface-visibility: Controls whether the back face of an element is visible when it is rotated.

  backface-visibility: hidden;

Further Reading

• CSS Transforms Module Level 2: Specification
• MDN Web Docs - backface-visibility: MDN Web Docs
• CSS-Tricks - Understanding 3D Transforms: CSS-Tricks

Conclusion

The backface-visibility property is a powerful tool for creating interactive and visually engaging web designs. By understanding its related properties and exploring further reading, you can enhance your web development skills and create more dynamic and appealing web projects. Whether you’re a seasoned developer or just starting out, these resources will help you gain a comprehensive understanding of CSS transforms and the backface-visibility property.