[分享]css3怎么边移动一边旋转

CSS3是现代网页制作不可或缺的一部分。在CSS3中，我们可以使用transform属性来实现元素的移动、旋转和缩放。本文将介绍如何同时实现元素的移动和旋转。我们首先需要为需要移动和旋转的元素设置一个...

CSS3是现代网页制作不可或缺的一部分。在CSS3中，我们可以使用transform属性来实现元素的移动、旋转和缩放。本文将介绍如何同时实现元素的移动和旋转。

我们首先需要为需要移动和旋转的元素设置一个基本样式：

.sample {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 

上述样式中，我们使用了position属性将元素定位为绝对定位，使它脱离文档流并能够通过transform属性来控制位置和旋转。top和left属性则将元素左上角定位在页面的中心点。transform属性中的translate(-50%, -50%)则将元素的中心点重新定位到左上角。

接下来，我们需要为元素添加动画效果。我们将使用@keyframes关键字来定义动画，并使用animation属性将它应用到元素上：

.sample {
    /* 基本样式 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* 添加动画效果 */
    animation: moveAndRotate 3s ease-in-out infinite;
}

@keyframes moveAndRotate {
    0% {
        /* 一开始的状态 */
        transform: translate(-50%, -50%) rotate(0deg);
    }
    50% {
        /* 中间状态 */
        transform: translate(-50%, -50%) rotate(180deg);
    }
    100% {
        /* 结束状态 */
        transform: translate(-50%, -50%) rotate(360deg);
    }
} 

上述代码中，我们定义了一个名为moveAndRotate的@keyframes动画。该动画包含三个状态：0%、50%和100%。在每个状态中，我们定义了元素应该具有的位置和旋转角度。然后，我们将该动画应用到元素上，并设置它在3秒钟内无限循环。

通过上述代码，我们就成功地同时实现了元素的移动和旋转。您可以根据需要更改动画的具体属性来实现不同的效果。