transform demo 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9     .rotate {
10         margin: 100px 100px;
11         width: 200px;
12         height: 100px;
13         background-color: #3a9;
14         transform: rotate(80deg);
15         transform-origin: 0 0;
16     }
17     .translate {
18         margin: 50px 50px;
19         width: 200px;
20         height: 100px;
21         background-color: rgb(173, 179, 120);
22         transform: translate(300px, 50px )
23     }
24     .scale {
25         margin: 50px 50px;
26         width: 40px;
27         height: 40px;
28         border-radius: 50%; 
29         background-color: rgb(160, 231, 26);
30         transform: scale(2);
31         text-align: center;
32         line-height: 40px;
33             }
34     .skew {
35         margin: 50px 50px;
36         width: 50px;
37         height: 50px;
38         background-color: rgb(52, 35, 204);
39         transform: skew(70deg,0deg)
40     }
41     </style>
42 </head>
43 <body>
44     <div class="rotate">高</div>
45     <div class="translate">高</div>
46     <div class="scale">高</div>
47     <div class="skew">高</div>
48 </body>
49 </html>

 

posted @ 2018-08-12 16:37  gaoxuerong  阅读(154)  评论(0)    收藏  举报