1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8">
5 <meta http-equiv="x-ua-compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7 <title>测试</title>
8 </head>
9 <body>
10 <section id="a-section1-3-b">a-section1-3-b</section>
11 <section id="section1-4-b">section1-4-b</section>
12 <style>
13 [id $= 'b']{ /* id以b结尾的 */
14 background-color: lightpink;
15 -webkit-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
16 -moz-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
17 -ms-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
18 -o-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
19 transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
20 /*缩小50% 水平垂直方向倾斜30°(rotate只有水平旋转) 水平垂直移动30px*/
21 }
22 #a-section1-3-b{
23 -webkit-transform-origin: left bottom;
24 -moz-transform-origin: left bottom;
25 -ms-transform-origin: left bottom;
26 -o-transform-origin: left bottom;
27 transform-origin: left bottom;
28 /*更换变形原点*/
29 }
30 </style>
31 </body>
32 </html>