h5-transform二维变换

1.html

 <div class="translate">1</div>
 <div class="scale">2</div>
 <div class="rotate">3</div>
 <div class="skew">4</div>

2.css和介绍

     <style>
         *{
             margin:;
             padding:;
         }
         .translate,.scale,.rotate,.skew{
             width: 100px;
             height: 100px;
             background-color: #ff1a23;
             margin-left: 200px;
             transition: transform 2s;
             margin-bottom: 20px;
         }
         /*移动：translate  */
         .translate:active{
             /*使用transform实现元素的移动  a.移动是参照元素的左上角  b.执行完毕之后会恢复到原始状态
             1.如果只有一个参数就代表x方向
             2.如果两个参数就代表x/y方向*/
             /*transform: translate(100px);*/
             /*transform: translate(200px,100px);*/
             /*添加水平方向或处置方向的移动*/
             /*transform: translateX(300px);*/
             transform: translateY(300px);
         }

         /*缩放：translate*/
         .scale:active{
             /*实现缩放  1指不缩放，>1放大  <1缩小  参照元素的几何中心
             1.如果只是一个参数，就代表x和y方向都进行相等比例的缩放
             2.如果有两个参数，就代表x/y方向*/
             /*transform: scale(2);*/
             /*transform: scale(2,1);*/
             /*缩放指定的方向*/
             /*transform: scaleX(0.5);*/
             transform: scaleY(0.5);

         }

         /*旋转：rotate*/
         .rotate:hover{

             /*设置旋转轴心
             1.x  y
             2.transform-origin:left top right bottom center*/
             /*transform-origin: left top;*/

             /*正数为顺时针旋转，负数为逆时针旋转*/
             /*transform: rotate(30deg);*/

             /*旋转加移动*/
             transform: translateX(700px) rotate(180deg);
             /*建议使用上一种顺序添加*/
             /*transform:  rotate(-90deg) translateX(700px);*/
         }

         /*斜切：skew*/
         .skew:hover{
             /*若果角度为证，则网当前轴的负方向斜切，反之则反*/
             /*transform: skew(30deg);*/
             /*transform: skew(30deg,-50deg);*/
             /*设置某个方向的斜切值*/
             /*transform: skewX(30deg);*/
             transform: skewY(30deg);

         }
     </style>