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θ
In this example total 43 elements will be there. We are going to align these 43 elements in Sin wave by using SASS trigonometric function.

#### 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
```

### Demo :

#### 1 comment:

1. A few years ago, you would have worked on your essay on your own for more than one day, but today you don't need to bother much. Today on the site FreePaperWriter.com you can order an essay on any topic. To make it easier for us to work, indicate the topic of the essay, the volume and the required date

## Blogroll

 Srinivas Dasari find me on facebook follow me on twitter