transform

transform

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>transform</title>
 6     <style>
 7         div{width: 300px;height: 300px;border:1px solid #666;margin: 50px;float: left;}
 8         .sper{width: 100px;height: 100px;border: 1px solid red;display: block;}
 9         i{}
10         em{width: 4px;height: 4px;background-color: #000;display: block;margin-left: 48px;margin-top: 48px;}
11         /*rotate旋转*/
12         .rotate1 .sper{transform:rotate(60deg);}
13         .rotate2 .sper{transform:rotate(-60deg);}
14         .rotate3 .sper{transform:rotate(60deg);transform-origin:150% 100%;}
15         /*skew倾斜*/
16         .skew1 .sper{transform:skew(60deg);}
17         .skew2 .sper{transform:skew(-60deg);}
18         .skew3 .sper{transform:skew(60deg);transform-origin:150% 100%;}
19         /*scale倾斜*/
20         .scale1 .sper{transform:scale(1.5);}
21         .scale2 .sper{transform:scale(0.5);}
22         .scale3 .sper{transform:scale(1.5);transform-origin:150% 100%;}
23         /*translate变动，位移*/
24         .translate1 .sper{transform:translate(0px,0px);}
25         .translate2 .sper{transform:translate(60px,30px);}
26         .translate3 .sper{transform:translate(0px,0px);transform-origin:150% 100%;}
27     </style>
28 </head>
29 <body>
30     <p>em为中心点,transform-origin:默认50% 50% 0</p>
31     <div class='rotate1'><i>rotate</i><div class='sper'><em></em></div></div>
32     <div class='rotate2'><i>rotate</i><div class='sper'><em></em></div></div>
33     <div class='rotate3'><i>rotate</i><div class='sper'><em></em></div></div>
34     
35     <div class='skew1'><i>skew</i><div class='sper'><em></em></div></div>
36     <div class='skew2'><i>skew</i><div class='sper'><em></em></div></div>
37     <div class='skew3'><i>skew</i><div class='sper'><em></em></div></div>
38 
39     <div class='scale1'><i>scale</i><div class='sper'><em></em></div></div>
40     <div class='scale2'><i>scale</i><div class='sper'><em></em></div></div>
41     <div class='scale3'><i>scale</i><div class='sper'><em></em></div></div>
42 
43     <div class='translate1'><i>translate</i><div class='sper'><em></em></div></div>
44     <div class='translate2'><i>translate</i><div class='sper'><em></em></div></div>
45     <div class='translate3'><i>translate</i><div class='sper'><em></em></div></div>
46 </body>
47 </html>
posted @ 2017-03-14 10:45  唯一的liaoliao  阅读(156)  评论(0)  编辑  收藏  举报