Question

有没有办法在保持原始（竖直）方向的同时使用旋转和平移属性围绕固定中心点旋转元素？在下面的示例中，每个元素都围绕固定点旋转，但同时也会使每个文本元素倾斜，而理想情况下，它应该在整个动画过程中保持水平。

body {
  display: grid;
  justify-content: center;
  width: 100vw;
}

.wrapper {
  width: 500px;
  height: 500px;
  display: grid;
  justify-content: center;
  align-content: center;
}

.wrapper>* {
  grid-column: 1;
  grid-row: 1;
}

.item1 {
  animation: rotate1 1s linear 1 forwards;
}

.item2 {
  animation: rotate2 1s linear 1 forwards;
}

.item3 {
  animation: rotate3 1s linear 1 forwards;
}

.item4 {
  animation: rotate4 1s linear 1 forwards;
}

@keyframes rotate1 {
  from {
    transform: rotate(0deg) translate(0px);
  }
  to {
    transform: rotate(45deg) translate(120px);
  }
}

@keyframes rotate2 {
  from {
    transform: rotate(0deg) translate(0px);
  }
  to {
    transform: rotate(135deg) translate(120px);
  }
}

@keyframes rotate3 {
  from {
    transform: rotate(0deg) translate(0px);
  }
  to {
    transform: rotate(225deg) translate(120px);
  }
}

@keyframes rotate4 {
  from {
    transform: rotate(0deg) translate(0px);
  }
  to {
    transform: rotate(315deg) translate(120px);
  }
}

<div class="wrapper">
  <h3 style="text-align: center">0</h3>
  <p class="item1">element1</p>
  <p class="item2">element2</p>
  <p class="item3">element3</p>
  <p class="item4">element4</p>
</div>

https://jsfiddle.net/hnr4ofmL

Answer 1

这是基于我从您的问题中理解的示例。您需要旋转每个项目，还需要始终保持文本直立。

因此，您还必须旋转项目及其内部的内容。

这里我添加了额外的跨度和边框来解释解决方案。

body {
  display: grid;
  justify-content: center;
  width: 100vw;
}

.wrapper {
  width: 500px;
  height: 250px;

  display: grid;
  justify-content: center;
  align-content: center;
}

.wrapper>* {
  grid-column: 1;
  grid-row: 1;
}

.items {
  padding: 4px;
}

.items span {
  display: block;
}

.item1 {
  animation: rotate1 1s linear 1 forwards;
}

.item2 {
  animation: rotate2 1s linear 1 forwards;
}

.item3 {
  animation: rotate3 1s linear 1 forwards;
}

.item4 {
  animation: rotate4 1s linear 1 forwards;
}

.item1 span {
  animation: spin1 1s linear 1 forwards;
}

.item2 span {
  animation: spin2 1s linear 1 forwards;
}

.item3 span {
  animation: spin3 1s linear 1 forwards;
}

.item4 span {
  animation: spin4 1s linear 1 forwards;
}

@keyframes spin1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-45deg);
  }
}

@keyframes spin2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-135deg);
  }
}

@keyframes spin3 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-225deg);
  }
}

@keyframes spin4 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-315deg);
  }
}

@keyframes rotate1 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(45deg) translate(120px);
  }
}

@keyframes rotate2 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(135deg) translate(120px);
  }
}

@keyframes rotate3 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(225deg) translate(120px);
  }
}

@keyframes rotate4 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(315deg) translate(120px);
  }
}

<div class="wrapper">
      <h3 style="text-align: center">0</h3>
      <p class="item1 items"><span>element1</span></p>
      <p class="item2 items"><span>element2</span></p>
      <p class="item3 items"><span>element3</span></p>
      <p class="item4 items"><span>element4</span></p>
 </div>

解释解决方案的边界：

body {
  display: grid;
  justify-content: center;
  width: 100vw;
}

.wrapper {
  width: 500px;
  height: 500px;

  display: grid;
  justify-content: center;
  align-content: center;
}

.wrapper>* {
  grid-column: 1;
  grid-row: 1;
}

.items {
  border: 1px solid black;
  padding: 4px;
}

.items span {
  border: 1px solid red;
  display: block;
}

.item1 {
  animation: rotate1 1s linear 1 forwards;
}

.item2 {
  animation: rotate2 1s linear 1 forwards;
}

.item3 {
  animation: rotate3 1s linear 1 forwards;
}

.item4 {
  animation: rotate4 1s linear 1 forwards;
}

.item1 span {
  animation: spin1 1s linear 1 forwards;
}

.item2 span {
  animation: spin2 1s linear 1 forwards;
}

.item3 span {
  animation: spin3 1s linear 1 forwards;
}

.item4 span {
  animation: spin4 1s linear 1 forwards;
}

@keyframes spin1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-45deg);
  }
}

@keyframes spin2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-135deg);
  }
}

@keyframes spin3 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-225deg);
  }
}

@keyframes spin4 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-315deg);
  }
}

@keyframes rotate1 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(45deg) translate(120px);
  }
}

@keyframes rotate2 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(135deg) translate(120px);
  }
}

@keyframes rotate3 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(225deg) translate(120px);
  }
}

@keyframes rotate4 {
  from {
    transform: rotate(0deg) translate(120px);
  }

  to {
    transform: rotate(315deg) translate(120px);
  }
}

<div class="wrapper">
      <h3 style="text-align: center">0</h3>
      <p class="item1 items"><span>element1</span></p>
      <p class="item2 items"><span>element2</span></p>
      <p class="item3 items"><span>element3</span></p>
      <p class="item4 items"><span>element4</span></p>
 </div>

CSS 围绕固定点旋转

1 个答案: