h5-transform二維變換

1.html

1 <div class="translate">1</div>
2 <div class="scale">2</div>
3 <div class="rotate">3</div>
4 <div class="skew">4</div>

2.css和介紹

 1     <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         .translate,.scale,.rotate,.skew{
 7             width: 100px;
 8             height: 100px;
 9             background-color: #ff1a23;
10             margin-left: 200px;
11             transition: transform 2s;
12             margin-bottom: 20px;
13         }
14         /*移動：translate  */
15         .translate:active{
16             /*使用transform實現元素的移動  a.移動是參照元素的左上角  b.執行完畢以後會恢復到原始狀態
17             1.若是隻有一個參數就表明x方向
18             2.若是兩個參數就表明x/y方向*/
19             /*transform: translate(100px);*/
20             /*transform: translate(200px,100px);*/
21             /*添加水平方向或處置方向的移動*/
22             /*transform: translateX(300px);*/
23             transform: translateY(300px);
24         }
25 
26         /*縮放：translate*/
27         .scale:active{
28             /*實現縮放  1指不縮放，>1放大  <1縮小  參照元素的幾何中心
29             1.若是隻是一個參數，就表明x和y方向都進行相等比例的縮放
30             2.若是有兩個參數，就表明x/y方向*/
31             /*transform: scale(2);*/
32             /*transform: scale(2,1);*/
33             /*縮放指定的方向*/
34             /*transform: scaleX(0.5);*/
35             transform: scaleY(0.5);
36 
37         }
38 
39         /*旋轉：rotate*/
40         .rotate:hover{
41 
42             /*設置旋轉軸心
43             1.x  y
44             2.transform-origin:left top right bottom center*/
45             /*transform-origin: left top;*/
46 
47             /*正數爲順時針旋轉，負數爲逆時針旋轉*/
48             /*transform: rotate(30deg);*/
49 
50             /*旋轉加移動*/
51             transform: translateX(700px) rotate(180deg);
52             /*建議使用上一種順序添加*/
53             /*transform:  rotate(-90deg) translateX(700px);*/
54         }
55 
56         /*斜切：skew*/
57         .skew:hover{
58             /*若果角度爲證，則網當前軸的負方向斜切，反之則反*/
59             /*transform: skew(30deg);*/
60             /*transform: skew(30deg,-50deg);*/
61             /*設置某個方向的斜切值*/
62             /*transform: skewX(30deg);*/
63             transform: skewY(30deg);
64 
65         }
66     </style>