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

css3的到来，让css技术进一步提高了，以前在css2不能实现的功能,现在都可以实现了，例如: 圆角，文字阴影，透明度，渐变，转换，过渡，动画等等。这些功能使用起来很方便。

今天我想介绍一下转换的用法：

transform主要包括以下属性值：

rotate(旋转度数)

scale(缩放)

skew（斜切扭曲）

translate(对象平移)

利用上述属性值，可以实现一些很酷的效果，比如正方体，下面是我做的一个效果，三个大小不等的正方体

代码如下：

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  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 
105 
106 
107 
108 
109 
110