css3 变换 transform(2D)

时间:2022-01-13 12:09:02

一、transform变换

  可做拉伸、压缩、旋转、偏移的效果。需加各个浏览器前缀。

二、transform-origin

  为transform属性值的基点,默认值为元素的中心位置,即以元素左上角为坐标轴原点,向右为x轴,向下为y轴,基点为(50%,50%)。

  1. transform-origin:x y z;

    1)x轴 取值:left/center/right/length/%

      百分比换算:

            left-------------0%

            center----------50%

            right------------100%

    2)y轴 取值:top/center/bottom/length/%

      百分比换算:

            top--------------0%

            center----------50%

            right------------100%

    3)z轴 取值:length

      2D默认为0,3D效果设置。

三、transform的属性值

  1.旋转 rotate(deg)

    通过指定的角度参数对元素以基点进行2D旋转。单位为deg。

  2.移动 translate(x,y)

    始终相对于元素中心偏移。单位为px。

    translateX(x);水平方向上的偏移量

    translateY(y);垂直方向上的偏移量

  3.缩放 scale(x,y)

    当值=1为原大小;值>1为放大;值<1为缩小。单位无。

    scaleX(x);水平方向上的缩放

    scaleY(y);垂直方向上的缩放

  4.倾斜 skew(x,y)

    给选定的元素进行以基点为中心的倾斜。单位为deg。

    skewX(x);水平方向上的倾斜

    skewY(y);垂直方向上的倾斜

  5.矩阵 matrix(rotateX,rotateY,rotate3D,translateZ,translate3D,scaleZ,scale3D)

    矩阵一共有6个参数。