FlipImage

Description:

A flipped image or reversed image, the more formal term, is a static or moving image that is generated by a mirror-reversal of an original across a horizontal axis (a flopped image is mirrored across the vertical axis).

It’s important for App Developers to understand the basics of manipulating images since rich applications rely on images to add value to the user interface and user experience (UI/UX).

FlipImage explores one aspect of image manipulation — image rotation. This app displays a square panel containing a single image presented in a 2x2 matrix. Using a set of up, down, left, and right arrows adjacent to each of the images the user may flip them vertically or horizontally.

You must only use Native android , XML, and Java to implement this app. Image packages and libraries are not allowed.

User Stories

• User can see a pane containing a single image repeated in a 2x2 matrix

• User can flip any one of the images vertically or horizontally using a set of up, down, left, and right arrows next to the image

Bonus features

• User can change the default image by entering the URL of a different image in an input field

• User can display the new image by clicking a ‘Display’ button next to the input field

• User can see an error message if the new images URL is not found

Flipping Images Horizontally or Vertically with CSS and JavaScript

In this 3 minute article we’ll look at flipping images horizontally and vertically using CSS and JavaScript. We’ll explore how to flip an img element, a background-image, or flip the actual ImageData using a canvas element.

Flipping an Image Element

We can flip the img element using the CSS transform property. We can do so using the scaleX and scaleY transforms.

Our image:

<img src="/media/tulips.jpg" alt="" />

The CSS to flip it.

img { /* flip horizontally */ transform: scaleX(-1);} img { /* flip vertically */ transform: scaleY(-1); } img { /* flip both */ transform: scale(-1, -1); }

Alternatively you can use rotateX and rotateY

img 
{
/* flip horizontally */
transform: rotateY(180deg);
}
img
 {
 /* flip vertically */
 transform: rotateX(180deg);
 }
 img 
 {
 /* flip both */
 transform: 
 rotateX(180deg) 
 rotateY(180deg);
 }