为什么我的 'transform' 不起作用？

Question

.rotate {
  display: block;
  width: 64px;
  height: 64px;
  border: 2px black dashed;
  animation: rotate 40s linear infinite;
  border-radius: 50%;
  transform: scale(1.8);
  position: relative;
  top: 50px;
  left: 50px;
}

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

<div class="rotate"></div>

如果你看一下 fiddle，"transform: scale(1.8);" 没有用。有没有其他方法可以让边框变大？

Answer 1

给你。当您尝试在初始旋转 class 中缩放时，转换不起作用是因为，由于旋转动画，它会逐渐变化。您必须 fix/scale 最初的宽度或高度和边框大小，然后如图所示在其上应用动画。

.rotate {
 display: block;
 width: 115px;
 height: 115px;
 border: 4px black dashed;
 animation: rotate 40s linear infinite;
 border-radius: 50%;
  position: relative;
  top: 50px;
  left: 50px;
}

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

<div class="rotate"></div>

Answer 2

真的没那么难。手动增加高度和宽度并增加边框宽度。

.rotate {
  display: block;
  width: 115px;
  height: 115px;
  border: 4px black dashed;
  animation: rotate 40s linear infinite;
  border-radius: 50%;
  position: relative;
  top: 50px;
  left: 50px;
}

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

<div class="rotate"></div>

为什么我的 'transform' 不起作用？

Why does my 'transform' not work?

css

css-transforms

css-animations