Css flip background image

How to flip background image using CSS?

The transform property is supported in Internet Explorer 10, Firefox, and Opera. Internet Explorer 9 supports an alternative, the -ms-transform property (2D transforms only). Safari and Chrome support an alternative, the -webkit-transform property (3D and 2D transforms). Opera supports 2D transforms only.

This is a 2D transform, so it should work, with the vendor prefixes, on Chrome, Firefox, Opera, Safari, and IE9+.

Other answers used :before to stop it from flipping the inner content. I used this on my footer (to vertically-mirror the image from my header):

footer < background:url(/img/headerbg.png) repeat-x 0 0; /* flip background vertically */ -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); >/* undo the vertical flip for all child elements */ footer *

So you end up flipping the element and then re-flipping all its children. Works with nested elements, too.

Solution 4

For what it’s worth, for Gecko-based browsers you can’t condition this thing off of :visited due to the resulting privacy leaks. See http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

Solution 5

You can flip both vertical and horizontal at the same time

 -moz-transform: scaleX(-1) scaleY(-1); -o-transform: scaleX(-1) scaleY(-1); -webkit-transform: scaleX(-1) scaleY(-1); transform: scaleX(-1) scaleY(-1); 

And with the transition property you can get a cool flip

 -webkit-transition: transform .4s ease-out 0ms; -moz-transition: transform .4s ease-out 0ms; -o-transition: transform .4s ease-out 0ms; transition: transform .4s ease-out 0ms; transition-property: transform; transition-duration: .4s; transition-timing-function: ease-out; transition-delay: 0ms; 

Actually it flips the whole element, not just the background-image

Some content here
 Click to flip

Источник

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.

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

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

original

scaleX(-1)

scaleY(-1)

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); >

original

rotateY(180deg)

rotateX(180deg)

rotateX(180deg)
rotateY(180deg)

The rotation transform is also a nice choice for when you want to animate the flip.

scaleX

rotateY

Note that I’ve added a slight perspective to the transform chain. Without the perspective transform the rotateY animation would be just as flat as the scaleX animation. I’ve added it to the scaleX animation as well to show that it doesn’t make a difference.

@keyframes flip-with-scale  0%  transform: perspective(400px) scaleX(1); > 100%  transform: perspective(400px) scaleX(-1); > > @keyframes flip-with-rotate  0%  transform: perspective(400px) rotateY(0); > 100%  transform: perspective(400px) rotateY(180deg); > >

Flipping a Background Image

The only way (at this point in time) (and as far as I can tell) to flip a background-image is to flip the element containing the background image. But that would flip its contents as well.

p class="tulips"> Tulips form a genus of spring-blooming perennial herbaceous bulbiferous geophytes. p>

.tulips  background-image: url(/media/tulips.jpg); background-repeat: no-repeat; background-size: contain; padding-left: 5em; > .tulips-flipped  transform: scaleX(-1); >

Tulips form a genus of spring-blooming perennial herbaceous bulbiferous geophytes.

Tulips form a genus of spring-blooming perennial herbaceous bulbiferous geophytes.

To work around this we can either move the background to a separate element or create a pseudo-element.

Let’s go with the pseudo-element.

.tulips  display: flex; width: 15em; > /* create our pseudo element */ .tulips-flipped::before  content: ''; background-image: url(/media/tulips.jpg); background-repeat: no-repeat; background-size: cover; min-width: 5em; > /* flip our pseudo element */ .tulips-flipped::before  transform: scaleX(-1); >

Tulips form a genus of spring-blooming perennial herbaceous bulbiferous geophytes.

Tulips form a genus of spring-blooming perennial herbaceous bulbiferous geophytes.

Flipping an Image with JavaScript

The CSS flipping techniques only alter the presentation of an image, not the actual pixel data. We can flip the pixel data using the canvas element. This might be useful if for example we want to flip an image before it’s uploaded to a server.

We’ll use the image data in the image element below the code snippet, it’s simply an img tag with a class name set to image-tulips .

img src="/media/tulips.jpg" class="image-tulips" alt="" />

Lets get a reference to the image. That allows us to load it to a canvas element for manipulation.

const inputImage = document.querySelector('.image-tulips'); // need to check if the image has already loaded if (inputImage.complete)  flipImage(); > // if not, we wait for the onload callback to fire else  inputImage.onload = flipImage; > // this function will flip the imagedata function flipImage()  // create a canvas that will present the output image const outputImage = document.createElement('canvas'); // set it to the same size as the image outputImage.width = inputImage.naturalWidth; outputImage.height = inputImage.naturalHeight; // get the drawing context, needed to draw the new image const ctx = outputImage.getContext('2d'); // scale the drawing context negatively to the left (our image is 400 pixels wide) // resulting change to context: 0 to 400 -> -400 to 0 ctx.scale(-1, 1); // draw our image at position [-width, 0] on the canvas, we need // a negative offset because of the negative scale transform ctx.drawImage(inputImage, -outputImage.width, 0); // insert the output image after the input image inputImage.parentNode.insertBefore( outputImage, inputImage.nextElementSibling ); >

The above code just ran, and you can view the result below. The first image is the inputImage and the second image is the outputImage canvas element.

Conclusion

We learned three methods to flip images for various purposes. We can flip images using the CSS transform property. The scaleX and scaleY transforms work but the rotateX and rotateY transforms allow for nicer animation (if needed). We quickly explored flipping background images using pseudo elements and ended the article with manipulating the actual image data using JavaScript and a canvas element.

I share web dev tips on Twitter, if you found this interesting and want to learn more, follow me there

At PQINA I design and build highly polished web components.

Make sure to check out FilePond a free file upload component, and Pintura an image editor that works on every device.

Источник

How to Flip Background Image Using CSS?

In web development, images are the most crucial element. Sometimes, the developer wants to see the different aspects of an image. More specifically, flipping an image in different ways is the best method to see all aspects of an image. To do so, the CSS “transform” property is utilized.

How to Insert a Background Image?

To insert the background images into the webpage, follow the step-by-step instructions.

Step 1: Insert Heading
First, create a heading with the help of any heading tag available in HTML. In this scenario, the h1 heading tag is utilized.

Step 2: Create Main div Container
Next, create a div container using the “ ” element. Furthermore, insert an id attribute with a specific name for identifying the div.

Step 3: Make Nested div Containers
After that, make nested div containers by following the same procedure stated in the previous step.

Step 4: Add an Image
Now, add an image by utilizing the “ ” tag. Then, define the following attributes inside the image tag:

• “src” attribute is used for adding the media file.
• “alt” is utilized for showing the text when the image is not displayed due to some reason.
• “style” attribute is used for inline styling. To do so, the CSS properties width and height to set the image size according to the specified values.

Step 5: Create backflip Container
Next, create a div container with the class name “backflip”.

Step 6: Add Heading for Image
Now, add a heading with the help of the “ ” heading tag to display along the image:

Output

Move toward the next section to learn about flipping the background image.

How to Flip Background Images Using CSS?

To flip background images using CSS, apply the “transform” property with the “scaleX” and “scaleY” transform after accessing the added image.

To do so, follow the mentioned procedure.

Step 1: Style Main div Container
Access the main div container with the help of the “id” selector along id name as “#main-flip”:

#main-flip {
background-color : transparent ;
width : 400px ;
height : 300px ;
margin : 30px 150px ;
}

According to the above code snippet, the following CSS properties have been applied to the container:

• “background-color” property is utilized for setting an image at the backside of the defined element.
• “width” property specifies the width size of an element.
• “height” is used for setting the element’s height.
• “margin” property allocates space on the outer side of the defined boundary.

Step 2: Apply CSS Styling on inner Container
Access the inner container with the help of the class name “.inner-flip”:

.inner-flip {
position : relative ;
width : 100% ;
height : 100% ;
text-align : center ;
transition : transform 0.7s ;
transform-style : preserve-3d ;
}

Then, apply the following CSS properties:

• “position” property specifies the type of positioning method used for an element
• “text-align” is utilized for setting the alignment of the text.
• “transition” properties permit elements for changing the values over a particular animation and duration.
• “transform-style” is utilized for specifying the elements rendered in 3D space which are nested.

Step 3: Apply “transform” Property
Access the main div element with the id name along the “:hover” selector and inner div with the help of class name as “.inner-flip”:

• Apply the “transform” property for setting the transformation and sets the value of this property as “rotateY(180deg)”
• “rotateY()” function is used to rotate the image in the Y axis at 180deg.

Step 4: Set “backface-visibility”
Access both div containers with their name as “#front-flip” and “.back-flip” to set the visibility:

#front-flip , .back-flip {
backface-visibility : inherit ;
color : rgb ( 39 , 39 , 243 ) ;
background-color : rgb ( 196 , 243 , 196 ) ;
}

To do so, apply the mentioned properties:

• “backface-visibility” defines whether or not the back face of an element should be visible when facing the user.
• “color” specifies the color for the added text.
• “background-color” sets the color at the backside of the defined element.

That’s all about flipping a background image using CSS.

Conclusion

To flip the background image using CSS, first, add an image using the “ ” element. Then, apply the CSS properties “transition” and set the value. After that, apply the “transform” property for setting the transformation and set the value of this property as “rotateY(180deg)”, which rotates the image according to the stated value. This post is all about flipping the background image using CSS.

Источник

Читайте также:  Java алгоритмы работы с массивами