css向左旋转的样式动画

你可以使用CSS3的transform属性来实现元素的旋转动画，例如：

.rotate {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

在上面的代码中，我们先定义了一个类名为“rotate”的元素，并将其设置为无限循环的2秒旋转动画。然后，我们使用@keyframes规则来定义动画的关键帧，从0度旋转到-360度，实现了一个向左旋转的动画。

相关问题

css向左旋转的动画代码怎么写

可以使用CSS3的transform属性来实现向左旋转的动画效果。具体代码如下：

.rotate-left {
  animation: rotateLeft 1s linear infinite;
}

@keyframes rotateLeft {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

在上面的代码中，我们定义了一个.rotate-left的类，它将会应用旋转动画。然后我们使用@keyframes关键字定义一个名为rotateLeft的动画序列，在这个序列中，我们将元素从0度旋转到-360度，这表示向左旋转。最后，我们将这个动画序列应用于.rotate-left类，使它可以重复无限次播放。

jquery 控制css样式 旋转动画

可以使用jQuery的css()方法和animate()方法来控制CSS样式旋转动画。首先，使用css()方法将要旋转的元素设置为绝对定位，然后使用animate()方法来改变元素的transform属性，从而达到旋转的效果。例如：

HTML代码：

<div id="box"></div>

CSS代码：

#box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
}

jQuery代码：

$(document).ready(function() {
  $('#box').css({
    'transform-origin': '50% 50%',
    'transform': 'rotate(0deg)'
  }).animate({
    'transform': 'rotate(360deg)'
  }, 1000);
});

在上面的代码中，我们使用了jQuery的css()方法将要旋转的元素设置为绝对定位，并将transform-origin属性设置为元素中心点，将transform属性设置为旋转0度。然后使用animate()方法改变transform属性，将元素旋转360度，完成旋转动画。