css 2D动画 定位

动画 平移

translate(tx,ty)

        

平移前

                   

 

平移后

 

// translateX(n) 向X轴平移N个像素

// translateY(n) 向Y轴平移N个像素

动画 放大

scale

 

       

 

 //scaleX(N) 向X轴缩放N倍         // scaleY（N）向Y轴缩放N倍    //scale(N) X轴和Y轴都缩放

 动画 平移

skew

          

 

       ​​​​​​​

 // shewX(N【deg】) 向X轴倾斜角度               .// shewY(N【deg】) 向Y轴倾斜角度   

动画 旋转

rotate 

 

 

 

// rotate(N【deg】) 向x轴旋转N度

定位

相对定位  relative  相对于 自己的定位   通过上下左右的数值进行平移 

绝对定位 absolute   相对于父级定位   一般使用relative 作为absolute的父级定位  根据父级 用来定位自己的位置 【就是将自身定位到父级上面  然后根据调上下左右的位置 满足自己需要的位置】

固定定位   fiexd  定位的父级 是浏览器窗口  【就是定位到浏览器窗口  不随着滚动条随便滚动  固定到浏览器窗口的一个地方】