CSS规则中第n个子元素的索引是什么？

Question

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

我想做类似以下的事情：

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

仅使用CSS3是否有可能实现这一点？我知道我可以使用SASS或LESS并遍历一些预设元素，但我希望它不是硬编码到CSS中，而是适用于任意数量的可能元素。

- Dunnow

---

我不这么认为！ - Praveen Puglia

@MrLister 我需要知道我所在的元素，以计算其位置。因此，如果我有10个元素，我希望第一个元素位于150，第十个元素位于1050。 - Dunnow

@Dunnow 好的。从问题中并没有很清楚地表达出来，你能否补充一下？无论如何，我暂时想不到在纯CSS中实现这个的方法。 - Mr Lister

不，你做不到。然而，针对你的特定情况可能有一些变通方法。如果你发帖子，我们可以试着解决。 - vals

@vals https://jsfiddle.net/dxng3xm8/8/ 在这里。 - Dunnow

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>

- vals

---

这是一个有趣的方法，我也在考虑采用这种方式。 - Dunnow