h5-transform-3d

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         div{

             width: 100px;

             height: 100px;

             background-color: #ff510a;

             margin-left: 200px;

             margin-top: 10px;

             transition: transform 2s;

         }

         /*添加三维运动---3d移动*/

         div:first-of-type:active{

             /*translate3d(x轴偏移,y轴偏移,z轴偏移)*/

             transform: translate3d(200px,200px,200px);

         }

         /*添加三维缩放*/

         div:nth-of-type(2):active{

             /*scale3d(x方向上的缩放，y方向的缩放，z方向的缩放

             >1 放大   <1 缩小)*/

             transform: scale3d(2,2,2);

         }

         /*添加三维旋转*/

         div:nth-of-type(3):active{

             /*rotate3d(x,y,z,angle)*/

             transform: rotate3d(1,1,0,300deg);

         }

     </style>

 </head>

 <body>

 <div>1</div>

 <div>2</div>

 <div>3</div>

 </body>

 </html>
巴特西

h5-transform-3d

最新文章

热门文章
