CSS3转换功能 transform

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 >