likes
comments
collection
share

2D

作者站长头像
站长
· 阅读数 38

一、概念

俗称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（绕着盒子中心点旋转多少角度）