过渡、变换、动画

transition渐变效果 拿来直接试下效果

1、先准备一个html 一个box

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

2、css 过渡渐变效果来了

*{
  margin: 0;
  padding: 0;
}
/* 过渡 */
.box-transition {
  width: 100px;
  height: 100px;
  background-color: orange;
  /* transition过渡 第三个参数是运动模式 */
  transition: all 2s linear;
  /* left: 0; */
}
.box-transition:hover{
  width: 200px;
  height: 200px;
  background-color: tomato;
  /* left: 200px; */
}

transform的位移、旋转、缩放、变形

1、准备html页面结构

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

2、css 页面添加装饰

/* 变换  */
.transfrom-box{
  width: 200px;
  height: 200px;
  background-color: greenyellow;
  margin: 0 auto;
  transition: all 1s;
    /* 旋转中心 */
  left: 200px;
  transform-origin: right bottom;
}

.transfrom-box:hover{

  /* 位移 */
  /* transform: translate(100px,20px); */
  /* transform: translateX(100px) translateY(20px); */

  /* 旋转 */
  /* transform:rotate(30deg); */

  /* 缩放 x,y代表水平、垂直方向*/
  /* transform: scale(.5 ); */
 
  /* 变形 x,y*/
  transform: skew(20deg);
}

动画效果

1、html

  <div class="container">
    <div class="trabsform-3d"></div>
    <div class="test-box"></div>
  </div>

2、css

/* 3d效果 */
.container {
  width: 200px;
  margin: 0 auto;
  /* 规定元素以3d显示 */
  transform-style: preserve-3d;
  /* 景深  视野 以3d显示必须设置的*/
  perspective: 500px;
  position: relative;
}
.container:hover{
  transform: rotate3d(0,1,0,180deg);
}

.trabsform-3d{
  width: 200px;
  height: 200px;
  background-color: orange;
  transition: all  1s;
  position: absolute;
}
.trabsform-3d:hover{
/* 3个值分别代表x,y,z */
/* 位移、旋转3d */
  /* transform: translate3d(100px,100px,100px); */
  /* transform: rotate3d(0,0,1,180deg); */
}
.test-box{
  width: 200px;
  height: 200px;
  background-color: greenyellow;
  position: absolute;
  transform: translateZ(100px);
  /* 动画 infinite代表无限 一直动 */
  animation: changeColor 5s linear infinite;
}

/* 关键帧动画 */
@keyframes changeColor {
  0% {
    background-color: red;
  }
  25% {
    background-color: rgb(0, 255, 166);
  }
  50% {
    background-color: rgb(223, 145, 48);
  }
  100% {
    background-color: red;
  }
  
}

注意：transform只有translate和rotate有3d效果 ，动画可结合3d一起使用