2

Is it possible to use pure CSS to rotate successive elements by a set amount (say 5deg).

I tried the following:

HTML

<div class="container">
    <div>Thing 1</div>
    <div>Thing 2</div>
    <div>Thing 3</div>
</div>

CSS

.container { 
    counter: my-counter;
}

.container > div {
    transform: rotateZ(counter(my-counter)deg);
    counter-increment: my-counter 5;
}

/* just to show the counter works: */
.container > div:after {
    content: counter(my-counter); 
    margin-left: 1em;
}

But to no avail.

CSS counters per MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

goofballLogic
  • 37,883
  • 8
  • 44
  • 62
  • can you show use the HTML sctructure and how the elements are? – Temani Afif May 27 '18 at 20:39
  • voila @TemaniAfif – goofballLogic May 27 '18 at 20:52
  • CSS doesn't work like this; CSS is pretty much stateless. Because there are no variables, there is no concept of 'incrementing'. – laptou May 27 '18 at 21:00
  • @laptou as seen in the example code, incrementing does exists in CSS but it can only be used in the content property of pseudo elements. read more here [css-counters](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) – eltonkamami May 27 '18 at 21:04
  • @eltonkamami Wow, this is the first I'm hearing of this. Thanks for the link, I just assumed that `counter-increment` was a nonstandard proprerty. – laptou May 27 '18 at 21:05

1 Answers1

0

Not sure if there is a way to do this considering sibling elements but if you are able to consider nested elements you simple need to do something like this:

.container div {
  transform: rotate(10deg);
  transform-origin:top left;
  margin:10px;
}
<div class="container">
  <div>Thing 1
  <div>Thing 2
  <div>Thing 3</div>
              </div>
              </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415