css3的到来，让css技术进一步提高了，以前在css2不能实现的功能,现在都可以实现了，例如: 圆角，文字阴影，透明度，渐变，转换，过渡，动画等等。这些功能使用起来很方便。
今天我想介绍一下转换的用法：
transform主要包括以下属性值：
rotate(旋转度数)
scale(缩放)
skew（斜切扭曲）
translate(对象平移)
利用上述属性值，可以实现一些很酷的效果，比如正方体，下面是我做的一个效果，三个大小不等的正方体
代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>CSS3转换功能</title>
6 <script type="text/javascript" src="jquery-1.7.min.js"></script>
7
8 <style type="text/css">
9 * {
10 margin: 0;
11 padding: 0;
12 list-style: none;
13 }
14
15 body {
16 padding-top: 100px;
17 }
18
19 .box {
20 margin: 0 auto 0;
21 width: 300px;
22 height: 500px;
23 position: relative;
24
25 }
26
27 .box .topBox {
28 position: absolute;
29 width: 300px;
30 height: 150px;
31 border: 1px solid #ccc;
32 top: 0;
33 left:107px;
34 background-color: yellow;
35 -moz-transform: skew(-55deg,0);
36 -webkit-transform: skew(-55deg,0);
37 -o-transform: skew(-55deg,0);
38 font-size: 100px;
39 text-align: center;
40
41 }
42
43 .box .topBox02{
44 position: absolute;
45 width: 300px;
46 height: 260px;
47 border: 1px solid #ccc;
48 border-top: none;
49 top: 152px;
50 left: 0;
51 background-color: green;
52 }
53
54 .box .topBox03{
55 position: absolute;
56 width: 214px;
57 height: 260px;
58 border: 1px solid #ccc;
59 border-top: none;
60 border-left: none;
61 top: 76px;
62 left: 302px;
63 background-color: blue;
64 -moz-transform: skew(0,-35deg);
65 -webkit-transform: skew(0,-35deg);
66 -o-transform: skew(0,-35deg);
67
68 }
69
70 .box .topBox04 {
71 position: absolute;
72 width: 300px;
73 height: 150px;
74 border: 1px solid #ccc;
75 top: 260px;
76 left:107px;
77 -moz-transform: skew(-55deg,0);
78 -webkit-transform: skew(-55deg,0);
79 -o-transform: skew(-55deg,0);
80
81 }
82
83 .box02 {
84 -moz-transform: scale(0.5,0.5) translate(455px,-838px);
85 -webkit-transform: scale(0.5,0.5) translate(455px,-838px);
86 -o-transform: scale(0.5,0.5) translate(455px,-838px);
87 }
88
89 .box03 {
90 -moz-transform: scale(0.2,0.2) translate(1671px, -4354px);
91 -webkit-transform: scale(0.2,0.2) translate(1671px, -4354px);
92 -o-transform: scale(0.2,0.2) translate(1671px, -4354px);
93 }
94
95 .box .topBox05 {
96 position: absolute;
97 width: 300px;
98 height: 260px;
99 border-left: 1px solid #ccc;
100 top: 0;
101 left:214px;
102 }
103
104 </style>
105 </head>
106
107 <body>
108
109 <div class="box">
110 <div class="topBox"></div>
111 <div class="topBox02"></div>
112 <div class="topBox03"></div>
113 <div class="topBox04"></div>
114 <div class="topBox05"></div>
115 </div>
116
117 <div class="box box02">
118 <div class="topBox"></div>
119 <div class="topBox02"></div>
120 <div class="topBox03"></div>
121 <div class="topBox04"></div>
122 <div class="topBox05"></div>
123 </div>
124 <div class="box box03">
125 <div class="topBox"></div>
126 <div class="topBox02"></div>
127 <div class="topBox03"></div>
128 <div class="topBox04"></div>
129 <div class="topBox05"></div>
130 </div>
131 </body>
132 </html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>CSS3转换功能</title>
6 <script type="text/javascript" src="jquery-1.7.min.js"></script>
7
8 <style type="text/css">
9 * {
10 margin: 0;
11 padding: 0;
12 list-style: none;
13 }
14
15 body {
16 padding-top: 100px;
17 }
18
19 .box {
20 margin: 0 auto 0;
21 width: 300px;
22 height: 500px;
23 position: relative;
24
25 }
26
27 .box .topBox {
28 position: absolute;
29 width: 300px;
30 height: 150px;
31 border: 1px solid #ccc;
32 top: 0;
33 left:107px;
34 background-color: yellow;
35 -moz-transform: skew(-55deg,0);
36 -webkit-transform: skew(-55deg,0);
37 -o-transform: skew(-55deg,0);
38 font-size: 100px;
39 text-align: center;
40
41 }
42
43 .box .topBox02{
44 position: absolute;
45 width: 300px;
46 height: 260px;
47 border: 1px solid #ccc;
48 border-top: none;
49 top: 152px;
50 left: 0;
51 background-color: green;
52 }
53
54 .box .topBox03{
55 position: absolute;
56 width: 214px;
57 height: 260px;
58 border: 1px solid #ccc;
59 border-top: none;
60 border-left: none;
61 top: 76px;
62 left: 302px;
63 background-color: blue;
64 -moz-transform: skew(0,-35deg);
65 -webkit-transform: skew(0,-35deg);
66 -o-transform: skew(0,-35deg);
67
68 }
69
70 .box .topBox04 {
71 position: absolute;
72 width: 300px;
73 height: 150px;
74 border: 1px solid #ccc;
75 top: 260px;
76 left:107px;
77 -moz-transform: skew(-55deg,0);
78 -webkit-transform: skew(-55deg,0);
79 -o-transform: skew(-55deg,0);
80
81 }
82
83 .box02 {
84 -moz-transform: scale(0.5,0.5) translate(455px,-838px);
85 -webkit-transform: scale(0.5,0.5) translate(455px,-838px);
86 -o-transform: scale(0.5,0.5) translate(455px,-838px);
87 }
88
89 .box03 {
90 -moz-transform: scale(0.2,0.2) translate(1671px, -4354px);
91 -webkit-transform: scale(0.2,0.2) translate(1671px, -4354px);
92 -o-transform: scale(0.2,0.2) translate(1671px, -4354px);
93 }
94
95 .box .topBox05 {
96 position: absolute;
97 width: 300px;
98 height: 260px;
99 border-left: 1px solid #ccc;
100 top: 0;
101 left:214px;
102 }
103
104 </style>
105 </head>
106
107 <body>
108
109 <div class="box">
110 <div class="topBox"></div>
111 <div class="topBox02"></div>
112 <div class="topBox03"></div>
113 <div class="topBox04"></div>
114 <div class="topBox05"></div>
115 </div>
116
117 <div class="box box02">
118 <div class="topBox"></div>
119 <div class="topBox02"></div>
120 <div class="topBox03"></div>
121 <div class="topBox04"></div>
122 <div class="topBox05"></div>
123 </div>
124 <div class="box box03">
125 <div class="topBox"></div>
126 <div class="topBox02"></div>
127 <div class="topBox03"></div>
128 <div class="topBox04"></div>
129 <div class="topBox05"></div>
130 </div>
131 </body>
132 </html>