In this article I am going to explain how to arrange given set of elements on Sin or Cos With CSS3 and SASS.

Lets see Math formula for Sin wave.

**X**= X -coordinate

**Y**= Y -coordinate

**A**= Amplitude

**P =**Period

**Y = A sinθ**

**X = P ( increment X periodically)**

Lets see Math formula for Cos wave.

**Y = A cosθ**

#### HTML markup of 43 div elements :

<div></div> <div></div> <div></div> ......40 more divs

### SASS code :

This below code will apply Left and Top positions based on nth-child property.$class: div !default $amp: 100 $period: 20 $angle: 30deg @for $i from 1 through 43 #{$class}:nth-child( #{$i} ) left: #{$amp + ( $period * ($i - 1) ) }px top: #{$amp + ($amp*sin( ($i - 1) * $angle)) }px div width : 5px height : 5px border : 1px solid #ccc position : absolute background-color : #ff0000

## 0 comments:

## Post a Comment