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>