Javascript Project to Flip Local Image Uploaded in Right,Left,Top,Bottom Directions in Browser Full Project For Beginners

 

 

 

index.html

 

 

<style>
body {
  font-family: sans-serif;
}

h2 {
  font-variant: small-caps;
}

img {
  width: 400px;
  height: 450p;
}
</style>
<h4>Flip the image horizontally or vertically with the click of a button</h4>
<img src="https://i.imgur.com/a3HjKfV.jpg" id="pic" alt="Palm trees against a sunset">
    <div id="buttons">
            <button onclick="up()">Up</button>
            <button onclick="down()">Down</button>
            <br>
            <button onclick="left()">Left</button>
            <button onclick="right()">Right</button>
    </div>

<script>

function up() {
    document.getElementById("pic").style.transform = "rotate(180deg)";


}

function down() {
    document.getElementById("pic").style.transform = "none";

}

function left() {
    document.getElementById("pic").style.transform = "none";
}


function right() {
    document.getElementById("pic").style.transform = "scaleX(-1)";
}

</script>

Leave a Reply