Pure CSS 旋转增量

Question

是否可以使用纯 CSS 将连续元素旋转一定量（比如 5 度）。

我尝试了以下方法：

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;
}

但是没有用。

每个 MDN

CSS 个计数器：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

Answer 1

不确定是否有办法在考虑兄弟元素的情况下做到这一点，但如果您能够考虑嵌套元素，您只需要做这样的事情：

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

Pure CSS 旋转增量

Pure CSS rotate by incrementing amount

css

css-counter