css中的2D平面转换

看到2D可以联想到数学中的X和Y轴,css中的2D平面转换就是指改变盒子(即元素)在X轴和Y轴的形态.

一.位移

语法:transform:translate(水平移动距离,垂直移动距离);

取值(正负均可): 向右移动取正值,向左移动取负值; 向下移动取正值,向上移动取负值;

常用场景:配合父相子绝定位实现盒子居中效果

            /* 相对定位 */
            position: relative;
            width: 500px;
            height: 500px;
            background-color: wheat;
        }
        .son {
            /* 绝对定位 */
            position: absolute;
            /* 移动父盒子宽的一半 */
            left: 50%;
            /* 移动自己宽的一半 */
            /* margin-left: -100px; */
            /* 移动父盒子高的一半 */
            top: 50%;
            /* 移动自己高的一半 */
            /* margin-top: -100px; */
            width: 200px;
            height: 200px;
            background-color: pink;
        }

二.旋转

1.默认原点是元素的中心点

语法:transform:rotate(角度);

单位:角度单位是:deg,或者是turn

换算:1度=1deg 360度=1turn

取值:取值为正,顺时针旋转; 取值为负,则逆时针旋转

注意:元素在旋转时为使效果更清晰一般配合过渡使用.

2.转换原点

改变旋转的中心点

语法:transform-origin:原点水平位置 原点垂直位置;

3.多重转换

例子:实现轮胎在页面滚动一段距离的效果

综合写法:先位移再旋转

语法:transform:translate(水平方向,垂直方向) rotate(角度);

注意:如果先旋转再位移,在旋转过程中坐标轴会发生变化,后面再位移会以旋转后的轴向为准,影响转换效果.

三.缩放

语法: transform:scale(x轴缩放倍数,y轴缩放倍数);

transform:scale(缩放倍数)

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

scale取值:

1以上是放大,1以下就是缩小,1倍表示不变;

缩放可以取负值,元素会先缩小再放大对应的倍数

四.倾斜

语法:transform:shew(倾斜角度)

单位:deg

取值:往左倾斜是负值,往右是正值

注意:倾斜角度不要为直角,在平面状态下直角是无法查看的.