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>

如果你看一下小提琴，那就是“变换：规模（1.8）;”没用。还有其他选择让边界更大吗？

Answer 1

你去吧。当您尝试在初始旋转类中进行缩放时，变换无效，因为它因旋转动画而逐渐变化。您必须最初修改/缩放宽度或高度，然后按边框大小应用动画，如图所示。

[[[UIApplication sharedApplication] delegate].window.rootViewController presentViewController:yourMapViewContorller animated:YES completion:nil];

.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);
    } 
}

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>

为什么我的'变换'不起作用？

2 个答案: