COPTER

by cliftonyeo

HTML

<div id="base" class="rotor">
    <div id="ext" class="rotor"></div>
    <div id="ext_two" class="rotor"></div>
</div>

<button id="BTN">swoosh</button>

CSS

#base {
    position: absolute;
    top: 150px;
    left: 150px;
    transform:rotate(0deg);
    transition:3s;
}

#ext {
    position:relative;
    top:0px;
    left:39px;
    transform:rotate(90deg); 
}

#ext_two {
    position:relative;
    top:-21px;
    left:-41px;
    transform:rotate(90deg); 
}

.rotor {
    height:20px;
    width:100px;
    background-color: rgba(0,90,255,0.5);
    border: 1px solid black;
   
}

#BTN {
    position:absolute;
    top: 350px;
}

JavaScript

angles =["90deg", "180deg", "270deg", "360deg", "0deg"]

function rotateCopter() {
    var base = document.getElementById('base');
    console.log(base);
    
    for (var i = 0; i<6; i++) {
    base.style.transform = 'rotate(' + angles[i] + ')';
    }
}


$("#BTN").click(rotateCopter() );


/*$("#BTN").click(function() {    
    $("#base").css("transform","rotate(90deg)")
}
); */