Result Size: 625 x 534
x
 
<!DOCTYPE html>
<html>
<head>
<style>
div {
  position: relative;
  height: 60px;
  width: 60px;
  background-color: red;
  transform: rotateY(180deg);
}
#div1 {
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
#div2 {
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: visible;
}
</style>
</head>
<body>
<h1>背面可见性属性</h1>
<p>此示例显示了两个 div 元素的背面。</p>
<p>这个div元素有"backface-visibility: hidden",div元素的背面是不可见的:</p>
<div id="div1">DIV 1</div>
<p>这个div元素有"backface-visibility: visible",div元素的背面显示正面的镜像:</p>
<div id="div2">DIV 2</div>
<p><strong>注意:</strong> Internet Explorer 9 及更早版本不支持 backface-visibility 属性。 Safari 以 webkit 前缀支持它。</p>
</body>
</html>