CSS3的高级特效-css3变形（2D位移、2D缩放、2D旋转、2D倾斜）、行内块元素和浮动的区别

1.CSS3变形

transform 属性向元素应用 2D 或 3D 转换。属性允许我们对元素进行旋转、缩放、移动或倾斜。

每个效果都可以称为变形（transform），★ 可以是一个，也可以是多个，中间以空格分开；

变形函数

translate()：平移函数，基于X、Y坐标重新定位元素的位置

scale()：缩放函数，可以使任意元素对象尺寸发生变化

rotate()：旋转函数，取值是一个度数值，度数单位是deg

skew()：倾斜函数，取值是一个度数值，度数单位是deg

注意：rotate旋转和skew倾斜的区别:

        rotate( )函数只是旋转，而不会改变元素的形状

        skew( )函数是倾斜，元素不会旋转，会改变元素的形状

2.2D位移

translate()：平移函数，基于X、Y坐标重新定位元素的位置

translate(tx,ty);

                tx  X轴（横坐标）移动的向量长度,左右移动,右正左负

                ty  Y轴（横坐标〉移动的向量长度,上下移动,下正上负

列如：

<style>
        *{margin: 0;padding: 0;}
        .div1{
            width: 200px;
            height: 200px;
            background-color: lavenderblush;
        }
        .div1:hover{
            transform: translate(100px,20px);