1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 div{
12 width: 100px;
13 height: 100px;
14 background-color: #ff510a;
15 margin-left: 200px;
16 margin-top: 10px;
17 transition: transform 2s;
18 }
19 /*添加三维运动---3d移动*/
20 div:first-of-type:active{
21 /*translate3d(x轴偏移,y轴偏移,z轴偏移)*/
22 transform: translate3d(200px,200px,200px);
23 }
24
25 /*添加三维缩放*/
26 div:nth-of-type(2):active{
27 /*scale3d(x方向上的缩放，y方向的缩放，z方向的缩放
28 >1 放大 <1 缩小)*/
29 transform: scale3d(2,2,2);
30 }
31
32 /*添加三维旋转*/
33 div:nth-of-type(3):active{
34 /*rotate3d(x,y,z,angle)*/
35 transform: rotate3d(1,1,0,300deg);
36 }
37 </style>
38 </head>
39 <body>
40 <div>1</div>
41 <div>2</div>
42 <div>3</div>
43 </body>
44 </html>
