Question

我正在尝试旋转/旋转一些堆叠的 div，但是＆＃39; transform-origin＆＃39;使用绝对div时，属性似乎被忽略。

附件是一个例子，div使用堆栈类堆叠。使用SVG会是一个更好的解决方案吗？

＆＃13;

.circle {
  height: 250px;
  width: 250px;
  border-radius: 50%;
  border: 50px solid white;
  margin: auto;
}

body {
  background: black;
  overflow: hidden;
}

.circle_one {
  animation: rotateY 3s infinite linear;
}

.circle_two {
  animation: rotateX 2s infinite linear;
}

.spinMe {
  animation: spinMe 2s infinite linear;
  transform-origin: 50% 50%;
}

.stack {
  position: absolute;
  top: 0;
  left: 0;
}

@-webkit-keyframes rotateY {
  to {
    transform: rotateY(360deg);
  }
}

@-webkit-keyframes rotateX {
  to {
    transform: rotateX(360deg);
  }
}

@-webkit-keyframes spinMe {
  to {
    transform: rotate(360deg);
  }
}

＆＃13;

<div class="spinMe">
<div class="circle circle_one stack"></div>
<div class="circle circle_two stack"></div>  
</div>

＆＃13;

Answer 1

问题在于spinMe元素由于绝对定位的子元素而具有100％宽度和零高度。如果您将spinMe定义的宽度和高度等于.circle，则它可以正常工作。

.circle {
  height: 250px;
  width: 250px;
  border-radius: 50%;
  border: 50px solid white;
  margin: auto;
}

body {
  background: black;
  overflow: hidden;
}

.circle_one {
  animation: rotateY 3s infinite linear;
}

.circle_two {
  animation: rotateX 2s infinite linear;
}

.spinMe {
  animation: spinMe 2s infinite linear;
  transform-origin: 50% 50%;
  width: 350px;
  height: 350px;
}

.stack {
  position: absolute;
  top: 0;
  left: 0;
}

@-webkit-keyframes rotateY {
  to {
    transform: rotateY(360deg);
  }
}

@-webkit-keyframes rotateX {
  to {
    transform: rotateX(360deg);
  }
}

@-webkit-keyframes spinMe {
  to {
    transform: rotate(360deg);
  }
}

<div class="spinMe">
<div class="circle circle_one stack"></div>
<div class="circle circle_two stack"></div>  
</div>

CSS transform-origin + stacked divs

1 个答案: