旋转div但使其内容不会颠倒

Question

有没有办法制作div旋转，以及它的内容，但是让内容在旋转时不会颠倒？ 我的意思是div-childs会跟随母亲旋转的旋转，但保持同一方向（顶部顶部，底部底部）。

我的英语并不足以清楚地表达我想做的事情，所以这里有一个例子：

＆＃13;

＆＃13;

.spin {
  margin: 50px;
  width: 200px;
  height: 200px;
  background: orange;
  animation: spin 10s infinite linear;
}

#div1 {
  border: 1px solid blue;
  width: 50px;
  height: 50px;
}

#div2 {
  border: 1px solid red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0;
}

#div3 {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
}

#div4 {
  border: 1px solid green;
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 0;
  right: 0;
}

.spin:hover {
  animation-play-state: paused;
}

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

＆＃13;

<div class="spin">
  <div id="div1">hello
  </div>
  <div id="div2">hello
  </div>
  <div id="div3">hello
  </div>
  <div id="div4">hello
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

在上面的例子中，子div正在跟随旋转和旋转 我希望他们不要'颠倒'＃34;然后按照轮换。

我在几个网站上看过这些类型的动画，但我无法回想起确切的位置。
有没有办法在css / js / jquery / php中做到这一点？？

Answer 1

您可以将相同的动画应用于四个孩子，但相反。这样，孩子的轮换抵消了父母的轮换，孩子们保持直立。

为清楚起见，我使用animation-direction来反转动画：

animation-direction: reverse;

但您可以在animation shorthand中添加方向，例如：

animation: spin 10s reverse infinite linear;

以下是一个例子：

＆＃13;

＆＃13;

.spin {
  margin: 50px;
  width: 200px;
  height: 200px;
  background: orange;
  animation: spin 10s infinite linear;
}
.spin div {
  width: 50px;
  height: 50px;
  animation: spin 10s infinite linear;
  animation-direction: reverse;
}
#div1 {
  border: 1px solid blue;
}
#div2 {
  border: 1px solid red;
  position: absolute;
  top: 0;
  right: 0;
}
#div3 {
  border: 1px solid black;
  position: absolute;
  bottom: 0;
  left: 0;
}
#div4 {
  border: 1px solid green;
  position: absolute;
  bottom: 0;
  right: 0;
}
.spin:hover,
.spin:hover div {
  animation-play-state: paused;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

＆＃13;

<div class="spin">
  <div id="div1">hello</div>
  <div id="div2">hello</div>
  <div id="div3">hello</div>
  <div id="div4">hello</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在@showdev回答之后，如果你想让内部div周围的边框跟随外部块的旋转并且只让内部文本保持“固定”的位置 - 你可以使用一些jQuery：< / p>

    $('.spin div').each(function() {
        $(this).contents().wrap('<span></span>');
    });

我还添加了一些css，你可以在片段内查看：

$('.spin div').each(function() {
  $(this).contents().wrap('<span></span>');
});

.spin {
  margin: 50px;
  width: 200px;
  height: 200px;
  background: orange;
  animation: spin 10s infinite linear;
}
.spin div {
  text-align: center;
  line-height: 50px;
}
.spin div span {
  animation: spin 10s infinite linear;
  animation-direction:reverse;
  display: inline-block;
}
#div1 {
  border: 1px solid blue;
  width: 50px;
  height: 50px;
}
#div2 {
  border: 1px solid red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0;
}
#div3 {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
}
#div4 {
  border: 1px solid green;
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 0;
  right: 0;
}
.spin:hover, .spin:hover span {
  animation-play-state: paused;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spin">
  <div id="div1">hello</div>
  <div id="div2">hello</div>
  <div id="div3">hello</div>
  <div id="div4">hello</div>
</div>

Answer 3

我知道你也希望4个元素中的每一个都留在角落区域。这可能需要一些额外的动画才能让它们围绕父边缘运行。

低于我理解的想法：

＆＃13;

＆＃13;

.spin {
  margin: 50px;
  width: 200px;
  height: 200px;
  background: orange;
  position: relative;
  animation: spin 10s infinite linear;
}
.spin div {
  width: 50px;
  height: 50px;
}
#div1 {
  border: 1px solid blue;
  animation: spin1 10s infinite linear;
  position: absolute;
  top: 0;
  left: 0;
}
#div2 {
  animation: spin2 10s infinite linear;
  border: 1px solid red;
  position: absolute;
  top: 0;
  right: 0;
}
#div3 {
  animation: spin3 10s infinite linear;
  border: 1px solid black;
  position: absolute;
  bottom: 0;
  left: 0;
}
#div4 {
  animation: spin4 10s infinite linear;
  border: 1px solid green;
  position: absolute;
  bottom: 0;
  right: 0;
}
.spin:hover,
.spin:hover div {
  animation-play-state: paused!important;/* or used id and several selectors to avoid the important and overide div#div1 {...}*/
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
@keyframes spin1 {
  0% {
    transform: rotate(0deg);
  }
  25% {
    top: 150px;
    left: 0
  }
  50% {
    left: 150px;
    top: 150px
  }
  75% {
    left: 150px;
    top: 0;
  }
  100% {
    transform: rotate(-359deg);
  }
}
@keyframes spin2 {
  0% {
    transform: rotate(0deg);
  }
  25% {
    top: 0;
    right: 150px
  }
  50% {
    right: 150px;
    top: 150px
  }
  75% {
    top: 150px;
    right: 0;
  }
  100% {
    transform: rotate(-359deg);
  }
}
@keyframes spin3 {
  0% {
    transform: rotate(0deg);
  }
  25% {
    bottom: 0;
    left: 150px
  }
  50% {
    left: 150px;
    bottom: 150px
  }
  75% {
    bottom: 150px;
    left: 0;
  }
  100% {
    transform: rotate(-359deg);
  }
}
@keyframes spin4 {
  0% {
    transform: rotate(0deg);
  }
  25% {
    right: 0;
    bottom: 150px
  }
  50% {
    right: 150px;
    bottom: 150px
  }
  75% {
    right: 150px;
    bottom: 0;
  }
  100% {
    transform: rotate(-359deg);
  }
}

＆＃13;

<div class="spin">
  <div id="div1">top left</div>
  <div id="div2">top right</div>
  <div id="div3">bottom left</div>
  <div id="div4">bottom right</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

将此规则添加到每个编号的div：

counterspin 10s infinite linear;

然后关键帧动画

@keyframes counterspin {
  0% {
    transform: rotate(0deg);
}
  100% {
    transform: rotate(-359deg);
    }
}

Answer 5

.spin {
  margin: 50px;
  width: 200px;
  height: 200px;
  background: orange;
  animation: spin 10s infinite linear;
  position:relative;
  
}
.spin div {
  margin:10px;
  animation: spin 10s infinite ease-in-out;
  animation-direction: reverse;
}
#div1 {
  border: 1px solid blue;
  width: 50px;
  height: 50px;
  position:absolute;
  top:0;
  left:0;
  
}

#div2 {
  border: 1px solid red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0;
}

#div3 {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
}

#div4 {
  border: 1px solid green;
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 0;
  right: 0;
}

.spin:hover {
  animation-play-state: paused;
}
.spin:hover div {
  animation-play-state: paused;
}

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

<div class="spin">
  <div id="div1">hello
  </div>
  <div id="div2">hello
  </div>
  <div id="div3">hello
  </div>
  <div id="div4">hello
  </div>
</div>

你可以试试这个

.spin {
  margin: 50px;
  width: 200px;
  height: 200px;
  background: orange;
  animation: spin 10s infinite linear;
  position:relative;

}
.spin div {
  margin:10px;
  animation: spin 10s infinite ease-in-out;
  animation-direction: reverse;
}
#div1 {
  border: 1px solid blue;
  width: 50px;
  height: 50px;
  position:absolute;
  top:0;
  left:0;

}

#div2 {
  border: 1px solid red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0;
}

#div3 {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
}

#div4 {
  border: 1px solid green;
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 0;
  right: 0;
}

.spin:hover {
  animation-play-state: paused;
}
.spin:hover div {
  animation-play-state: paused;
}

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

}