哈喽哈喽，这里是小菜不拖延博主

笔记打卡day11~

以下内容基于：CSS 过渡 (w3school.com.cn)

transform

2D转换

translate()

平移

右移动 50 个像素，并向下移动 100 个像素
 transform: translate(50px, 100px);

scale()

缩放宽高

元素增大为其原始宽度的两倍和其原始高度的三倍
transform: scale(2, 3);

scaleX()&scaleY()

单独缩放宽高

transform: scaleX(0.5);
transform: scaleY(3);

rotate()

旋转,正值为顺时针，负值为逆时针

顺时针旋转 20 度
transform: rotate(20deg);

skew()&skewX()&skewY()

元素沿 X/Y 轴倾斜给定角度

transform: skew(20deg, 10deg);
transform: skewX(20deg);
transform: skewY(20deg);

沿X轴倾斜效果：给的值越大，图形越向右走按照垂直方向X轴，逆时针旋转

沿Y轴倾斜效果：给的值越大，图形按照水平方向Y轴，顺时针旋转

matrix()

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

transform: matrix(1, -0.3, 0, 1, 0, 0);

3D转换

rotateX()&rotateY()&rotate()

元素绕其 X/Y/Z 轴旋转给定角度

transition过渡

过渡

创建过渡效果，必须明确两件事：

• 您要添加效果的 CSS 属性
• 效果的持续时间

 transition: width 2s, height 4s;

过渡的速度曲线

• ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
• linear - 规定从开始到结束具有相同速度的过渡效果
• ease-in -规定缓慢开始的过渡效果
• ease-out - 规定缓慢结束的过渡效果
• ease-in-out - 规定开始和结束较慢的过渡效果
• cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

延迟过渡

transition-delay: 1s;

过渡加转换

过渡属性

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

属性	描述
transition	简写属性，用于将四个过渡属性设置为单一属性
transition-delay	规定过渡效果的延迟（以秒计）
transition-duration	规定过渡效果要持续多少秒或毫秒。
transition-property	规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function	规定过渡效果的速度曲线。