Run
1264 x 150
1
<!DOCTYPE html>2
<html>3
<head>4
<style>5
div {6
position: relative;7
height: 60px;8
width: 60px;9
background-color: red;10
transform: rotateY(180deg);11
}12
#div1 {13
backface-visibility: hidden; /* Safari */14
backface-visibility: hidden;15
}16
#div2 {17
backface-visibility: hidden; /* Safari */18
backface-visibility: visible;19
}20
</style>21
</head>22
<body>23
<h1>backface-visibility property example</h1>24
<p>This example shows the back face of two div elements.</p>25
<p>This div element has "backface-visibility: hidden", and the back face of the div element is invisible:</p>26
<div id="div1">DIV 1</div>27
<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>28
<div id="div2">DIV 2</div>29
<p><strong>Note:</strong> The backface-visibility property is supported in Safari with a webkit prefix.</p>30
</body>31
</html>
