Chris Beckett Chris Beckett - 13 days ago 6
CSS Question

Spin elements instead of sliding from off the page

I've currently got the square boxes sliding in from each side from off the page. I want the square boxes to spin while sliding into the page. Then have it stop spinning once it has got the correct position on the page.

What would be the best way of achieving the spinning?



$('.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

Simply change this part of your code

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

to this

.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>