CODEWITHSUNDEEP
csstransformcss-animations
hpet
hpet

Reputation: 299

Rotate multiple elements at the same time

I have list of items (li) that are stacked around in circle using transformation. Items have different angle depending on its initial position in the circle:

last negative rotate is to rotate ccw to keep element in up position. translate Y is radius offset.

What I would like to accomplish is to rotate all items around for various number of degrees or let's say if one item gets clicked I would like all items to rotate so that clicked item will be on the top position (0deg).

What would be best way to do this? Looking for some clever ways.. All items should ofcourse rotate at the same time - like a dialer on the old phone.

Upvotes: 2

Views: 2371

Answers (1)

web-tiki
web-tiki

Reputation: 103810

With some jQuery, you can change the class of the container and assign the rotation value to the container :

fiddle

$('.one').click(function() {
  $('#container').removeClass('second third fourth').addClass('first');
});
$('.two').click(function() {
  $('#container').removeClass('first third fourth').addClass('second');
});
$('.three').click(function() {
  $('#container').removeClass('first second fourth').addClass('third');
});
$('.four').click(function() {
  $('#container').removeClass('first second third').addClass('fourth');
});
#container {
  position: relative;
  width: 30%;
  padding-bottom: 30%;
  margin: 10% auto;
  transition: transform .5s ease-out;
}
.elt {
  position: absolute;
  padding: 2%;
  background: teal;
  cursor: pointer;
  transition: transform .5s ease-out;
}
.one { top: 0; left: 47.5%; }
.two { top: 47.5%; right: 0; }
.three { bottom: 0; left: 47.5%; }
.four { top: 47.5%; left: 0; }
#container.first { transform: rotate(0deg); }
#container.first div { transform: rotate(0deg); }
#container.second { transform: rotate(-90deg); }
#container.second div { transform: rotate(90deg); }
#container.third { transform: rotate(180deg); }
#container.third div { transform: rotate(-180deg); }
#container.fourth { transform: rotate(90deg); }
#container.fourth div { transform: rotate(-90deg); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="elt one">1</div>
  <div class="elt two">2</div>
  <div class="elt three">3</div>
  <div class="elt four">4</div>
</div>

Upvotes: 1

Related Questions