html - CSS 规则中第 n 个 child 的索引？

Question

是否有一种纯 CSS 方法来获取规则在特定点应用的“子索引”编号？

我想做这样的事情

div:nth-child(1n+0) {
    transform: translate3d( calc(index-nth * 50), 0, 0);
}

用普通的 CSS3 有可能吗？我知道我可以使用 SASS 或 LESS 并遍历许多预设元素，但我不希望它被硬编码到 CSS 中，而是用于任何数量的可能元素。

Answer 1

有点棘手，但我们开始吧。

我正在使用内联样式让元素自行定位，然后一个单一的转换将它们全部排列:

.container,
.elem {
  transform-style: preserve-3D;
  transition: transform 1s;
}

.elem {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: lightgreen;
  display: inline-block;
  transform: rotateY(-90deg);
}

.container {
  display: inline-block;
  transform: rotateY(90deg);
  transform-origin: 235px center;
}

body:hover .container {
  transform: rotateY(0deg);
}

body:hover .elem {
  transform: rotateY(0deg);
}

<div class="container">
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
</div>