CSS3转换功能 transform 主要属性值分析及实现

20个HTML5&CSS3超酷应用

类型：源码相关大小：18.9M语言：中文评分：10.0
标签：

立即下载

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>