案例:CSS3 案例     状态:可编辑再运行    进入竖版
 运行结果 
x
<img src="/img/china_pavilion.jpg" alt="世博中国馆" width="284" height="213" />
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style> 
5
body
6
{
7
margin:30px;
8
background-color:#E9E9E9;
9
}
10
11
div.polaroid
12
{
13
width:294px;
14
padding:10px 10px 20px 10px;
15
border:1px solid #BFBFBF;
16
background-color:white;
17
/* Add box-shadow */
18
box-shadow:2px 2px 3px #aaaaaa;
19
}
20
21
div.rotate_left
22
{
23
float:left;
24
-ms-transform:rotate(7deg); /* IE 9 */
25
-moz-transform:rotate(7deg); /* Firefox */
26
-webkit-transform:rotate(7deg); /* Safari and Chrome */
27
-o-transform:rotate(7deg); /* Opera */
28
transform:rotate(7deg);
29
}
30
31
div.rotate_right
32
{
33
float:left;
34
-ms-transform:rotate(-8deg); /* IE 9 */
35
-moz-transform:rotate(-8deg); /* Firefox */
36
-webkit-transform:rotate(-8deg); /* Safari and Chrome */
37
-o-transform:rotate(-8deg); /* Opera */
38
transform:rotate(-8deg);
39
}
40
</style>
41
</head>
42
<body>
43
44
<div class="polaroid rotate_left">
45
<img src="/img/ballade_dream.jpg" alt="郁金香" width="284" height="213" />
46
<p class="caption">上海鲜花港的郁金香,花名:Ballade Dream。</p>
47
</div>
48