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>