CSS – 动画 – 转换 transform2D

简介

通过CSS3 transform 转换，我们能够对元素进行移动、缩放、旋转斜切等操作。

translate() 2D移动

可以把元素从原来的位置移动，移动参照元素左上角原点。

语法

translate(tx) |  translate(tx,ty)  

tx 是一个代表X轴移动的向量长度，当其值为正值时，元素向X轴右方向移动，反之其值为负值时，元素向X轴左方向移动。

ty 是一个代表Y轴移动的向量长度，当其值为正值时，元素向Y轴下方向移动，反之其值为负值时，元素向Y轴上方向移动。

如果ty 没有显式设置时，相当于ty=0

也可以使用

translateX()

translateY()

单独移动某个方向

用法

div:active{
  transform : translate(x,y)
}

可以配合 transition 设置过渡移动

div{
  transition: transform 1s;
}

div:active{
  transform : translate(x,y)
}

注意：执行完毕后会恢复到原始状态

div{
  transition: transform 1s;
}

// 使用translateX 和 translateY
div:active{
  transform : translateX(100px)
  transform : translateY(100px)
}

scale() 缩放

缩放 scale() 函数让元素根据中心原点对对象进行缩放。

默认值为1,因此0.01到0.99之间的任何值，使一个元素缩小。而任何大于或等于1.01的值，让元素显得更大，缩放参照元素中心点。

语法

scale(sx|sy) | scale(sx,sy)

sx  用来指定横向坐标（X轴）方向的缩放向量，如果值为0.01~0.99之间，会诽对象在X轴方向缩小，如果值大于或等于1.01,对象在X轴方向放大。

sy  用来指定横向坐标（Y轴）方向的缩放向量，如果值为0.01~0.99之间，会诽对象在Y轴方向缩小，如果值大于或等于1.01,对象在Y轴方向放大。

也可以使用 scaleX(sx)  或者 scale(sy)

用法

div:active{
  transform : scale(n)  
  transform : scale(x,y)
}

可以配合 transition 设置过渡移动

div{
  transition: transform 1s;
}
// 使用scaleX和 scaleY
div:active{
  transform : scaleX(1) // 1指不缩放
  transform : scaleX(2) // 2指放大一倍
  transform : scaleY(0.5) // 0.5指缩小一半
}

rotate() 旋转

rotate( ) 旋转函数，通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度，如果这个值为正值，元素相对原点中心顺时针旋转，如果值为负值，元素相对原点中心逆向旋转。

语法

rotate(a)

a 代表的是一个旋转的角度值，其取值可以是正的，也可以是负的，如正值时为顺时针转，负值时为逆时针转。

用法

div:active{
  transform : rotate(45deg)  
  transform : rotate(-45deg)
}

设置旋转中心点

transform-origin 可以设置其中心点，有四个参数,通常配合两个参数使用

top

left

bottom

right

dic{
  transform-origin: top left;  // 左上
  transform-origin: top right;  // 右上
  transform-origin: bottom left;  // 左下
  transform-origin: bottom right;  // 右下
}

skew() 斜切

skew() 能够让元素倾途显示。它可以将一个对象以其中心位置，围绕着X轴和Y轴按照一定的角度倾斜。这与 rotate() 函数的旋转不同，rotate() 函数只是旋转，而不会改变元素的形状。skew() 函数不会旋转，而只会改变元素的形状

div:active{
    transform-origin: top left;  左上
    transform-origin: top right;  右上
    transform-origin: bottom left;  左下
    transform-origin: bottom right;  右下
}

此时，该元素的中心点被设置成对应的角点上。

语法

skew(ax) | skew(ax,ay)

ax 用来指定元素水平方向（X轴方向）倾斜的角度,如果值为正值，则往当前轴的负方向斜切

ay 用来指定元素垂直方向（Y轴方向）倾斜的角度，如果示显式的设置这个值，其默认值为0，如果值为正值，则往当前轴的负方向斜切

用法

div:active{
  transform : skew(45deg); 
  transform : skew(10deg,-20deg);
}

也可以单独使用 skewX 和 skewY 设置

div:active{
  transform : skewX(45deg); 
  transform : skewY(-45deg);
}

同时添加多个 transform 属性

通过使用配置多个 transform 是不能生效的，因为这样会导致后者的transform覆盖到上一个transform。

这样导致切换失效
div{
    transform: translate(700px);
    transform: rotate(45deg);
}

可以使用空格来设置多个变换同时切换

div{
    transform: translate(700px) rotate(45deg);
}

清除转换值

使用 transform: none 来清除被切换的值，并恢复回元素原始坐标值。