css平移转动动画

CSS是网页开发必不可少的技术，通过CSS我们可以实现丰富的动态效果。其中平移转动动画是比较常见的一种，下面我们针对这一效果进行详细介绍。

代码示例：
/* 平移动画 */
.move {
    transition: transform 1s;
}

.move:hover {
    transform: translate(50px,50px);
}

/* 转动动画 */
.rotate {
    transition: transform 1s;
}

.rotate:hover {
    transform: rotate(360deg);
}

上面的代码示例中，我们使用了CSS3中的transition属性，用来定义过渡效果的时间和过渡效果的类型。我们通过:hover伪类来控制鼠标移动到元素上的时候触发动画效果，实现平移和转动动画。

对于平移动画，我们使用了CSS3中的transform属性以及translate()函数。translate()函数用来实现元素的平移操作，参数包含x、y两个方向上的偏移量。在:hover状态下，我们将元素的transform属性的值设为translate(50px,50px)，即让元素向右下方平移50像素。

对于转动动画，我们同样使用了transform属性，不过这里使用了rotate()函数。rotate()函数用来实现元素的旋转操作，参数为角度值，以度为单位。在:hover状态下，我们让元素的transform属性的值设为rotate(360deg)，即将元素旋转360度。

使用CSS平移转动动画可以让页面看起来更加生动活泼，同时也可以提升用户体验，让用户在使用网页时有更好的感觉。以上就是关于CSS平移转动动画的介绍，希望可以对大家有所帮助。