CSS Properties: How to visible or hide the backside of a rotated division element?
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 |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics