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>