[分享]css3左右分开旋转

CSS3中提供了许多新的特性，其中包括旋转功能。我们可以通过CSS3实现元素旋转的效果，其中一个很酷的效果是左右分开旋转。下面介绍具体实现方法。.rotatecontainer { : relativ...

CSS3中提供了许多新的特性，其中包括旋转功能。我们可以通过CSS3实现元素旋转的效果，其中一个很酷的效果是左右分开旋转。下面介绍具体实现方法。

.rotate-container {
  position: relative;
  width: 200px;
  height: 100px;
  margin: 50px auto;
}

.rotate-container .rotate-left {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 50%;
  height: 100%;
  background-color: #f00;
  transform-origin: left center;
  animation: rotate-left 2s linear infinite;
}

.rotate-container .rotate-right {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 50%;
  height: 100%;
  background-color: #00f;
  transform-origin: right center;
  animation: rotate-right 2s linear infinite;
}

@keyframes rotate-left {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-180deg);
  }
}

@keyframes rotate-right {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(180deg);
  }
} 

首先，我们需要一个容器来包裹两个要旋转的元素，这个容器设置相对定位、宽度、高度和居中。分成左右两部分的两个元素，都要设置绝对定位。我们给左边元素设置z-index为2，给右边元素设置z-index为1，这样左边的元素会显示在右边元素的上面。

我们给左边元素和右边元素都设置了初始的宽度为50%和高度为100%，并设置不同的背景颜色。设置transform-origin为left center（左边元素）和right center（右边元素），这样旋转时会以元素的中心为旋转点。

接着我们就需要设置这两个元素旋转的动画效果。使用CSS3动画的@keyframes规则，定义rotate-left和rotate-right两个动画。左边元素的rotate-left动画是从0度旋转到-180度，右边元素的rotate-right动画是从0度旋转到180度。

为了让两个动画无限循环，我们需要在左边元素的样式中加上animation: rotate-left 2s linear infinite;，在右边元素的样式中加上animation: rotate-right 2s linear infinite;。

这样，我们就实现了左右分开旋转的效果。可以用在各种场景中，比如酷炫的图片展示、动态的Loading等。