javascript - 旋转元素而不是从页面上滑动

Question

我目前已经让方框从页面的每一侧滑入。我希望方框在滑入页面时旋转。一旦它在页面上找到正确的位置，就让它停止旋转。

实现旋转的最佳方式是什么？

$('.box-wrapper').each(function(index, element) {

    setTimeout(function(){
        element.classList.remove('loading');
    }, index * 600);

});

body {
    overflow-x: hidden;
}

.box-wrapper {
    -webkit-transition-duration: 600ms;
    transition-duration: 600ms;
}

.box-wrapper.loading:nth-child(odd) { transform: translate(100%) }
.box-wrapper.loading:nth-child(even) { transform: translate(-100%) }


.box-wrapper:nth-child(odd)  .box { background: orange }
.box-wrapper:nth-child(even) .box { background: red }


.box {
    margin: auto;
    width: 100px;
    height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>

Answer 1

只需更改这部分代码

.box-wrapper.loading:nth-child(odd) { transform: translate(100%) }
.box-wrapper.loading:nth-child(even) { transform: translate(-100%) }

对此

.box-wrapper.loading:nth-child(odd) { transform: translate(100%) rotate(-180deg); }
.box-wrapper.loading:nth-child(even) { transform: translate(-100%) rotate(180deg);}

$('.box-wrapper').each(function(index, element) {

  setTimeout(function() {
    element.classList.remove('loading');
  }, index * 600);

});

body {
  overflow-x: hidden;
}
.box-wrapper {
  -webkit-transition-duration: 600ms;
  transition-duration: 600ms;
}
.box-wrapper.loading:nth-child(odd) {
  transform: translate(100%) rotate(-180deg);
}
.box-wrapper.loading:nth-child(even) {
  transform: translate(-100%) rotate(180deg);
}
.box-wrapper:nth-child(odd) .box {
  background: orange
}
.box-wrapper:nth-child(even) .box {
  background: red
}
.box {
  margin: auto;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box-wrapper loading">
  <div class="box"></div>
</div>
<div class="box-wrapper loading">
  <div class="box"></div>
</div>
<div class="box-wrapper loading">
  <div class="box"></div>
</div>
<div class="box-wrapper loading">
  <div class="box"></div>
</div>
<div class="box-wrapper loading">
  <div class="box"></div>
</div>
<div class="box-wrapper loading">
  <div class="box"></div>
</div>