Flip Image Display

INFORMATION & CODE

Flip Image Display

What the Code Does

This code creates an interactive webpage that allows users to manipulate the orientation of an image using a set of styled buttons. The user interface displays a central photograph accompanied by four retro-styled buttons labeled "Default," "Horizontal," "Verticle," and "Both." The CSS styles these buttons with a vibrant blue gradient, rounded corners, and a custom arcade-style font ("VT323") sourced from Google Fonts, while also including a temporary squeezing effect when the image itself is clicked.

The functionality is driven by JavaScript, which selects the image and all four buttons using the Document Object Model (DOM). It assigns specific click event listeners to each button to dynamically alter the CSS transform property of the image. The first button resets the image to its original state, the second flips it horizontally along the X-axis using scaleX(-1), the third flips it vertically along the Y-axis using scaleY(-1), and the fourth inverses the image in both directions simultaneously using scale(-1).

To use this code, save the HTML, CSS, and JavaScript snippets into three separate files named index.html, styles.css, and scripts.js respectively, ensuring they are placed in the same folder. You will also need to create a placeholder JavaScript file named scripts.js (or ensure your HTML correctly links to it) so the event listeners can properly attach. Once the files are set up, simply open the index.html file in any modern web browser to view the page and click the buttons to see the image transform.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flip Image Display</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
  </head>
  <body>
    <img src="https://e-nash.net/photos/blogger-2838945_1280.jpg" class="img" alt="The blogger">
    <button class="flip_btn">Default</button>
    <button class="flip_btn">Horizontal</button>
    <button class="flip_btn">Verticle</button>
    <button class="flip_btn">Both</button>
    <script src="scripts.js"></scripts>
  </body>
</html>

CSS


                .img {
  width: 80%;
  margin: 0 10%;
}
.img:active {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
.flip_btn {
  position: relative;
  top: 10px;
  left: 50%;
  transform: translatex(-220%);
  width: 20%;
  padding:10px;
  margin-top: 10px;
  background: linear-gradient(#00ccff, #0088ff, #0000ff);
  border: 0;
  outline: 0;
  border-radius: 8px;
  color: #ffffff;
  font-family: "VT323", cursive;
  font-size: 18px;
  font-weight: 900;
}

JAVASCRIPT


                let inc = 0 - 1;
let index = 0;
const btn = document.querySelectorAll(".flip_btn");
const img = document.querySelector(".img");
      
btn[0].addEventListener("click", () => {
  img.style.transform = null;
});
btn[1].addEventListener("click", () => {
  img.style.transform = "scaleX(" + inc + ")";
});
btn[2].addEventListener("click", () => {
  img.style.transform = "scaleY(" + inc + ")";
});
btn[3].addEventListener("click", () => {
  img.style.transform = "scale(" + inc + ")";
});

MENU

INFORMATION & CODE