<html>
<head>
<style>
div {
position: relative;
height: 60px;
width: 60px;
background-color: red;
transform: rotateY(180deg);
}
#div1 {
backface-visibility: hidden;
}
#div2 {
backface-visibility: visible;
}
</style>
</head>
<body>
<h1>The backface-visibility Property</h1>
<p>This example shows the back face of two div elements.</p>
<p>This div element has "backface-visibility: hidden", and the back face of the div element is invisible:</p>
<div id="div1">DIV 1</div>
<p>This div element has "backface-visibility: visible", and the back face of the div element shows a mirror image of the front face:</p>
<div id="div2">DIV 2</div>
<p><strong>Note:</strong> The backface-visibility property is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
<!-- Mirrored from www.w3schools.com/cssref/tryit.asp?filename=trycss3_backface-visibility by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 27 Jan 2020 03:00:11 GMT -->
</html>