transform动画_transform实现元素宽度变化动效

CSS3中引入的

2D变化

2D的transform应用在x和y轴上，而3D的则多了一条z轴。

transform属性可以让元素实现变形，旋转，缩放等视觉效果。

2. Scale缩放

.box {
  transform: rotate(20deg); //顺时针
}
.box2 {
  transform: rotate(-20deg); //逆时针
}

.box {
  transform: scale(.5); //缩小为原来的一半
}
 
.box2 {
  transform: scale(2); //放大为原来的两倍
}

你也可以只针对宽度或者高度进行缩放操作。

.box {
  transform: scaleX(2); //将宽度变为原来的两倍
}
 
.box2 {
  transform: scaleY(.25); //将高度变为原来的25%
}

3. Skew 倾斜

.box {
  transform: skewX(-5deg); //X轴顺时针旋转5度
}
 
.box1 {
  transform: skewY(20deg); //Y轴逆时针旋转20度
}
 
.box3 {
  transform: skew(-5deg, 20deg); //同时作用在X和Y轴上
}

4. Translate 平移

.box {
  transform: translateX(-10px); //在横轴上向左平移10个像素点
}
 
.box2 {
  transform: translateY(20%); //在Y轴上向下平移其自身高度的20%
}
 
.box3 {
  transform: translate(-10px, 20%); //同时在X轴和Y轴上平移
}

实例动画：

X轴:水平向右，X右边是正值，左边是负值。

Y轴:垂直向下，Y下面是正值,上面是负值。

Z轴:垂直屏幕，往外面是正值,往里面是负值。

通过CSS tr