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
Your blogs are great. Are you also searching for Help with my Math assignment? we are the best solution for you. We are best known for delivering quality essay writing services to students without having to break the bank
ReplyDelete