CODEWITHSUNDEEP
htmlcsssass
aspirinemaga
aspirinemaga

Reputation: 3937

Automatically calculate rotation degree in SCSS to rotate multiple elements from 0 to 180

I'm trying to create an instrumental cluster for vehicle dashboard.

As an example CSS, I want to distribute 41 div.tick between rotate(0deg) and rotate(180deg) appropriately.

Is it possible to make such calculation in pure SCSS automatically ?

Here is my code:


.radial {
    @for $i from 0 through $ticks - 1 {
      .tick:nth-child(#{$i + 1}) {
        transform: rotate( $step+deg) ;
      }
    }
  }

All it gives me is a rotate(82deg) for all items enter image description here

Upvotes: 0

Views: 569

Answers (1)

JRoss
JRoss

Reputation: 1395

I think this is what you're looking for. Calculate the percentage within the loop ($i / ($ticks - 1)) * $deg

$ticks: 41;
$deg: 180;

.radial {
  @for $i from 0 through $ticks - 1 {
    .tick:nth-child(#{$i + 1}) {
      transform: rotate( ($i / ($ticks - 1)) * $deg + deg ) ;
    }
  }
}

CSS output can be viewed here: https://codepen.io/WebNesting/pen/LYYENaK

Upvotes: 3

Related Questions