h5-transform-3d 

 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>

 

posted @ 2019-08-21 18:18  FengBrother  阅读(309)  评论(0)    收藏  举报