css - 为什么我的 '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

给你。当您尝试在初始旋转类中缩放时，变换不起作用是因为旋转动画会逐渐改变它。您必须首先固定/缩放宽度或高度以及边框大小，然后如图所示在其上应用动画。

.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>