案例：CSS3 案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
div
6
{
7
position:relative;
8
height:60px;
9
width:60px;
10
border:1px solid #000;
11
background-color:yellow;
12
transform:rotateY(180deg);
13
-webkit-transform:rotateY(180deg); /* Chrome and Safari */
14
-moz-transform:rotateY(180deg); /* Firefox */
15
}
16
#div1
17
{
18
-webkit-backface-visibility:hidden;
19
-moz-backface-visibility:hidden;
20
-ms-backface-visibility:hidden;
21
}
22
#div2
23
{
24
-webkit-backface-visibility:visible;
25
-moz-backface-visibility:visible;
26
-ms-backface-visibility:visible;
27
}
28
</style>
29
</head>
30
<body>
31
​
32
<p>本例有两个 div 元素，均旋转 180 度，背向用户。</p>
33
​
34
<p>第一个 div 元素的 backface-visibility 属性设置为 "hidden"，所以应该是不可见的。</p>
35
​
36
<div id="div1">DIV 1</div>
37
​
38
<div id="div2">DIV 2</div>
39
​
40
<p><b>注释：</b>本例只在 Internet Explorer 10、Firefox、Chrome 以及 Safari 中有效。</p>
41
​
42
</body>
43
</html>
44
​
45
​
46
​