CODEWITHSUNDEEP
htmlcssindexingcss-selectors
Dunnow
Dunnow

Reputation: 414

index of nth-child within the CSS rule?

Is there a CSS only approach to get the "child index" number the rule is applying at a certain point?

I want to do something like this

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

is that even possible with plain CSS3? I know I could use SASS or LESS and iterate through a number of preset elements but I'd like it to not be hard-coded into the CSS but be there for any number of possible elements.

Upvotes: 4

Views: 2065

Answers (1)

vals
vals

Reputation: 64244

A little bit tricky, but here we go.

I am using an inline style to make the elements position themselves, then a single transform arranges them all: 

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

Upvotes: 3

Related Questions