网络日志

2D

一、概念

俗称2d变换,指的是基于2d平面的角度,让标签元素发生变化。例如,让盒子移动、让盒子缩放、让盒子旋转。


二、平移

1.概念

平移是让盒子在水平方向或垂直方向进行移动。

2.语法

transform:方向属性(像素值);方向属性:

    translateX(水平方向移动,正值向右,负值向左)
    translateY(垂直方向移动,正值向下,负值向上)

复合写法:

    transform: translate(水平方向像素值, 垂直方向像素值); 

三、缩放

1.概念

缩放指让盒子可以缩放或放大一定的倍数

2.语法

transform:方向属性(放大倍数)方向属性:

    scaleX(横向放大)
    scaleY(纵向放大)

复合写法:

    transform: scale(倍数); (注意:大于1的放大,小于1缩小)

四、旋转

1.概念

旋转指让盒子绕着x轴或y轴进行旋转。

2.语法

transform: 方向属性(旋转的角度,单位为deg);
transform-origin: x轴坐标 y轴坐标; (调整旋转的中心,可以使用像素值,可以使用关键字)
backface-visibility: hidden; (设置旋转180度以后背面是否可见)

方向属性:

    rotateX(绕着x轴旋转多少角度)
    rotateY(绕着Y轴旋转多少角度)
    rotate(绕着盒子中心点旋转多少角度)