CSS Properties: How to visible or hide the backside of a rotated division element?

Last update on February 15 2024 10:04:22 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>How to visible or hide the backside of a rotated division element</title><!-- Set the title of the HTML document -->
<style> /* CSS style start*/
xyz {
position: relative; /* Set the position of the elements to relative */
height: 100px; /* Set the height of the elements to 100px */
width: 100px; /* Set the width of the elements to 100px */
background-color: #CC00CC; /* Set the background color of the elements */
-webkit-transform: rotateY(180deg);  /* Chrome, Safari, Opera */ /* Apply a 180-degree rotation around the Y-axis for WebKit browsers */
transform: rotateY(180deg); /* Apply a 180-degree rotation around the Y-axis */
}
#xyz1 {
-webkit-backface-visibility: visible;  /* Chrome, Safari, Opera */ /* Make the back side of the element visible for WebKit browsers */
backface-visibility: visible; /* Make the back side of the element visible */
}
#xyz2 {
-webkit-backface-visibility: hidden;  /* Chrome, Safari, Opera */ /* Hide the back side of the element for WebKit browsers */
backface-visibility: hidden; /* Hide the back side of the element */
}
</style>
</head>
<body>
<div id="xyz1">w3resource Tutorial</div><!-- Create a division element with id "xyz1" and content "w3resource Tutorial" -->
<div id="xyz2">w3resource Tutorial</div><!-- Create a division element with id "xyz2" and content "w3resource Tutorial" -->
</body>
</html>

Explanation:

This HTML document contains two division elements with ids "xyz1" and "xyz2".
CSS is used to style these elements, setting their position, height, width, and background color.
The -webkit-transform and transform properties are used to apply a 180-degree rotation around the Y-axis to both elements, effectively flipping them.
The backface-visibility property is utilized to control the visibility of the back side of the rotated elements.
#xyz1 has backface-visibility set to visible, allowing the back side of the element to be visible.
#xyz2 has backface-visibility set to hidden, hiding the back side of the element.

Live Demo:

See the Pen backface-visibility-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page