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>
