移动web-平面转换

平面转换

        使用场景：使用transform属性实现元素平面的位移、旋转、缩放等效果

        注意：

            1 改变盒子在平面内的形态（位移、旋转、缩放）

            2 2D转换

            3 transform会增大盒子层级 并没有脱标 和相对定位特点相似

            4 transform对行内元素不起效果

        1 使用translate实现元素平面的位移效果

            代码：transform: translate(水平移动距离, 垂直移动距离)

            取值（正负均可）

                1 像素单位数值

                2 百分比（参照物为盒子自身尺寸）

                注意：X轴正向为右，Y轴正向为下

            使用技巧：

                1 translate()如果只给出一个值, 表示x轴方向移动距离

                2 单独设置某个方向的移动距离：translateX() & translateY()

        2 使用transform-origin属性改变元素平面的转换原点

            代码：transform-origin: 原点水平位置 原点垂直位置（旋转中心默认为原点）

            取值

                1 方位名词（left、top、right、bottom、center）

                2 像素单位数值(少用)

                3 百分比（参照盒子自身尺寸计算）

   

        3 使用scale改变元素平面的尺寸

            代码：transform: scale(x轴缩放倍数, y轴缩放倍数)

            使用技巧：

                1 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

                2 transform: scale(缩放倍数);

                3 scale值大于1表示放大, scale值小于1表示缩小