CSS3 transform制作的Windows徽标

<style>#windows .canvas { 
    background: #fff;
}
#windows .icon { 
    left:193px; 
    position: absolute; 
    top:20px;
    -moz-transform: rotate(16deg);
    -webkit-transform: rotate(16deg);
    transform: rotate(16deg);
}
.window-e1,
.window2,
.window3,
.window4 { 
    position:absolute;
}
.window-e1 { 
    border-radius:100px/67px;
    clip: rect(0px 77px 67px 0);
    height: 67px;
    left: 9px;
    position: absolute;
    top: 11px;
    width:102px;
}
.window-e2 {
    height: 85px;
    left: 0;
    position: absolute;
    top:27px;
    -moz-transform:skewy(-30deg);
    -webkit-transform:skewy(-30deg);
    transform:skewy(-30deg);
    width:25px;
}
.window-e3 { 
    height: 41px;
    left: 24px;
    position: absolute;
    top: 64px;
    width: 62px;
}
.window-e4 { 
    background: #fff;
    opacity:1;
    border-radius:100px/67px;
    clip:rect(0 77px 12px 16px);
    height: 67px;
    left: 9px;
    position: absolute;
    top: 96px;
    width:100px;
}
.window1 { 
    left:0;
    position: absolute;
    top:0;
}
.window1 .window-e1,
.window1 .window-e2,
.window1 .window-e3 { 
    background: #d53407;
}
.window2 {
    left: 183px;
    position:absolute;
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    top: 119px;
}
.window2 .window-e1,
.window2 .window-e2,
.window2 .window-e3 { 
    background: #7dae1c;
}
.window3 { 
    left: 0;
    position: absolute;
    top:95px;
}
.window3 .window-e1,
.window3 .window-e2,
.window3 .window-e3 { 
    background: #3576ac;
}
.window4 {
    left: 183px;
    position:absolute;
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    top: 214px;
}
.window4 .window-e1,
.window4 .window-e2,
.window4 .window-e3 { 
    background: #fac112;
}
#windows .glow {
    background: -moz-gradient(radial, 50% 50%, 20, 50% 50%, 100, from(rgba(255, 255, 255, 0.7)), to
(rgba(255, 255, 255, 0)));
    background: -webkit-gradient(radial, 50% 50%, 20, 50% 50%, 100, from(rgba(255, 255, 255, 0.7)), 
to(rgba(255, 255, 255, 0)));
    height: 214px;
    position: absolute;
    width:182px;
  }
#windows .registered {
    left:190px;
    position: absolute;
    -moz-transform: rotate(-16deg);
    -webkit-transform: rotate(-16deg);
    transform: rotate(-16deg);
    top:160px;
}
#windows .shadow1,
#windows .shadow2,
#windows .shadow3 { 
    background: #ccc;
}
.window1 .window-e4,
.window3 .window-e4 { 
    top:101px;
}
.window1 .shadow1,
.window3 .shadow1 {
    left: 65px;
    clip: rect(0px 30px 94px 21px);
    -moz-transform: skewy(30deg);
    -webkit-transform: skewy(30deg);
    transform: skewy(30deg);
    top: 16px;
}
.window1 .shadow2,
.window3 .shadow2 { 
    clip:rect(50px 40px 90px 5px);
    top:30px;
    width:32px;
}
.window1 .shadow3,
.window3 .shadow3 {
    clip: rect(0 77px 12px 16px);
    top:96px;
}
.window2 .shadow1,
.window4 .shadow1 {
    clip:rect(0px 10px 90px 5px);
    left: -10px; top: 28px;
}
.window2 .shadow2,
.window4 .shadow2 { 
    clip:rect(70px 40px 90px 5px);
    left:-6px;
    top:-44px;
}
.window2 .shadow3,
.window4 .shadow3 {
    clip:rect(0 73px 22px 0px);
    left:9px;
    top:6px;
}</style>
<div style="clear:both; position:relative;">
<div id="windows">
   <div class="canvas">        
<div class="icon">
            <div class="window1">
                <div class="window-e1"></div>              
  <div class="window-e2 shadow1"></div>
                <div class="window-e2 shadow2"></div>         
       <div class="window-e2"></div>
                <div class="window-e3"></div>
                <div class="window-e4 shadow3"></div>
                <div class="window-e4"></div>
            </div>            
<div class="window4">
                <div class="window-e1 shadow3"></div>
                <div class="window-e1"></div>
                <div class="window-e2 shadow1"></div>
                <div class="window-e2 shadow2"></div>
                <div class="window-e2"></div>
               <div class="window-e3"></div>
                <div class="window-e4"></div>
<div class="window-e4"></div>
<div class="window-e4"></div> 
           </div> 
           <div class="window3">  
              <div class="window-e1"></div>
                <div class="window-e2 shadow1"></div>             
   <div class="window-e2 shadow2"></div> 
               <div class="window-e2"></div>                
<div class="window-e3"></div>
                <div class="window-e4 shadow3"></div>
                <div class="window-e4"></div>
            </div>
            <div class="window2">
                <div class="window-e1 shadow3"></div>
                <div class="window-e1"></div>
                <div class="window-e2 shadow1"></div>
               <div class="window-e2 shadow2"></div>                
<div class="window-e2"></div> 
               <div class="window-e3"></div>
                <div class="window-e4"></div>
            </div>
            <div class="glow"></div>
            <div class="registered">&reg;</div>
        </div>
    </div></div></div>