css3怎样实现旋转加位移动画

CSS3 旋转动画

要实现 CSS3 的 旋转动画，可以使用 transform 属性。

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}

在上例中，我们设置了一个宽高都为 100 像素，背景颜色为红色的 div，同时对其使用了 transform: rotate(45deg) 属性，来实现其旋转 45 度的效果。

CSS3 位移动画

实现 CSS3 位移动画，同样适用 transform 属性和 transition 属性。

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  left: 0;
  transition: left 1s;
}
div:hover {
  left: 100px;
}

在上例中，我们设置了一个宽高都为 100 像素，背景颜色为红色的 div，同时对其设置了 position: relative 和 left: 0 属性，来实现其左侧对齐的效果。而当出现 hover 事件时，则会增加 left 的属性值，将 div 向右移动 100px。

CSS3 旋转加移动动画

既然我们已经掌握了 CSS3 的 旋转动画 和 位移动画，那么如何结合这两种动画进行操作呢？这里提供一个实例供大家参考。

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  left: 0;
  transform: rotate(0deg);
  transition: all 1s;
}
div:hover {
  left: 100px;
  transform: rotate(180deg);
}

在上例中，我们设置了一个宽高都为 100 像素，背景颜色为红色的 div，同时对其进行既有移动又有旋转的操作。它初始的 left 设定为 0，transform: rotate(0deg) 的旋转角度为 0，同时也设置了 transition: all 1s 属性，表示在一秒的时间里，所有的属性都将呈现出过渡效果。当出现 hover 事件时，left 的值将被增加 100 像素，实现移动效果，同时 transform: rotate(180deg) 的旋转角度将会对其进行 180 度的旋转。

总结

在日常中，我们经常会用到 CSS3 的动画效果，如果我们能够将其灵活结合与运用，那么我们便可以更加高效而美观地完成各种页面设计。CSS3 主要通过 transform 属性和 transition 属性来实现动画效果，通过对这两种属性的灵活搭配，我们可以完成各种运动轨迹的动画效果，比如旋转、位移、透明度、缩放等。