css过渡 变换

过度

功能：实现元素不同状态之间的平滑过渡。

之前：元素->hover状态 直接切换，从开始状态到结束状态，瞬间完成，中间过程几乎无法查看。

格式：transition：过度属性 完成时间 运动曲线 延迟时间；

数值型的属性才可以设置过渡。

width,height,color,font-size

他是一个复合属性。可以拆出单独写

transition-property 过渡属性：发生变化时，想要有过渡效果的属性。all，全属性。

transition-duration 完成时间：单位是s/ms。

transition-timing-function 运动曲线：

linear 匀速

ease 减速

ease-in 加速

ease-in-out 先加速后减速
linear 匀速

ease 减速

ease-in 加速

ease-in-out 先加速后减速

transition-delay 延迟时间：单位是s 默认为0 过渡多久后生效。 从结束状态返回到开始状态时，也会生效。

.box{
      width: 200px;
      height: 200px;
      background-color: rosybrown;
      transition-property: all;
      transition-duration: 2s;
      transition-timing-function: ease-in;
      transition-delay: 1s;
    }
    .box:hover{
      width: 800px;
      background-color: royalblue;
    }

<div class="box"></div>

鼠标悬停之前

鼠标悬停一秒后，两秒变成

鼠标移走之后一秒，两秒恢复原状

2D缩放

格式：

transform:scale(水平方向的缩放倍数,垂直方向的缩放倍数)

取值：大于1表示放大，小于1缩小。

 .box{
      width: 100px;
      height: 100px;
      margin: 100px auto;
      background-color: saddlebrown;
      transition: all 1s;
    }
    .box:hover{
      transform: scale(0.5);
    }

<div class="box"> </div>

鼠标悬停一秒后，方块变为原来的0.5倍

2D位移

格式：

transform:translate(水平偏移量，垂直偏移量)

参数：

正值：向右和向下 负值：反方向。

百分比。盒子本身的宽高*百分比

.box{
      width: 100px;
      height: 100px;
      margin: 100px auto;
      background-color: black;
      transition: all 1s;
    }
    .box:hover{
      transform: translate(100%,100%);
    }

<div class="box"></div>

鼠标悬停在方块上时，方块向右下位移自身的长度

倾斜

transform:skew(水平倾斜角度，垂直倾斜角度)

单位：deg 角度

正值：顺时针，负值：逆时针。

  width: 484px;
      height: 300px;
      margin: 100px auto;
      background-color: black;
    }
    .box:hover{
      transform: skew(0,10deg);
    }

<div class="box"></div>

鼠标悬停

旋转

旋转

设置旋转的中心点

属性值：px 英文（left center right top bottom） 百分比

百分比是按照自身宽高*百分比计算的。

只写一个值，第二值默认为center。

让盒子进行旋转

格式：

transform: rotate(角度);

单位：deg 正值为顺时针，负值为逆时针。

transform 可以书写多个2D转换，中间用空格隔开。

当rotate和translate在一起的时候，注意书写顺序。

rotate在前，先旋转自身，再按照旋转的角度，进行位移。

translate在前，先进行位移，再旋转自身。

.box{
      width: 350px;
      height: 350px;
      margin: 100px auto;
      background-image: url("./男刀.png");
      transition: all 3s;
      }
    .box:hover{
      transform: rotate(45deg);
    }

<div class="box"></div>

鼠标悬停3秒，旋转45度