Flip/Mirror an Image Horizontally + Vertically with CSS

Flip / mirror an image horizontally + vertically with css

Try this:

.img-hor-vert {
    -moz-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    transform: scale(-1, -1);
}

Updated fiddle: https://jsfiddle.net/7vg2tn83/1/

It wasn't working before because you were overriding the transform in your css. So instead of doing both, it just did the last one. Sort of like if you did background-color twice, it would override the first one.

Can you use CSS to mirror/flip text?

You can use CSS transformations to achieve this. A horizontal flip would involve scaling the div like this:

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

And a vertical flip would involve scaling the div like this:

-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);

---

DEMO:

span{ display: inline-block; margin:1em; } .flip_H{ transform: scale(-1, 1); color:red; }.flip_V{ transform: scale(1, -1); color:green; }

<span class='flip_H'>Demo text ✂</span><span class='flip_V'>Demo text ✂</span>

How to horizontally flip an image

First, to remove your 2 unwanted image, just clear the canvas and redraw the desired images. You can clear the canvas using context.clearRect(0,0,canvas.width,canvas.height).

Flip image(s) horizontally

How to horizontally flip an image:

1. Move (translate) the canvas origin to your desired X-coordinate plus the image width: context.translate(x+img.width,y); Adding the img.width is necessary because we are grabbing the left edge of the image and flipping it leftward. Without adding img.width, the img would be drawn leftward of the desired x-coordinate.

2. Flip horizontally using context.scale(-1,1);

3. Draw the image: `context.drawImage(img,0,0);

4. Clean up by resetting transformations to their default values: context.setTransform(1,0,0,1,0,0);

Annotated code and a Demo:

var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");var cw=canvas.width;var ch=canvas.height;
var img=new Image();img.onload=start;img.src="https://dl.dropboxusercontent.com/u/139992952/multple/sillouette2.png";function start(){
    ctx.fillText('original',10,30);    ctx.drawImage(img,10,30);
    ctx.fillText('flipped',150,30);    flipHorizontally(img,150,30);
}
function flipHorizontally(img,x,y){    // move to x + img's width    ctx.translate(x+img.width,y);
    // scaleX by -1; this "trick" flips horizontally    ctx.scale(-1,1);        // draw the img    // no need for x,y since we've already translated    ctx.drawImage(img,0,0);        // always clean up -- reset transformations to default    ctx.setTransform(1,0,0,1,0,0);}

#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>

How to flip images horizontally with HTML5

canvas = document.createElement('canvas');
canvasContext = canvas.getContext('2d');

canvasContext.translate(width, 0);
canvasContext.scale(-1, 1);
canvasContext.drawImage(image, 0, 0);

Here's a snippet from a sprite object being used for testing and it produces the results you seem to expect.

Here's another site with more details. http://andrew.hedges.name/widgets/dev/

Flip horizontally html and css

Your fiddle already had the start of the answer - to do a second flip on the text. There was an extra , preventing the second rule from being parsed.

I've updated the fiddle to include the heading elements, and set them to inline-block because inline elements can't be transformed.

.flip-horizontal, .x-grid-cell-inner, .x-column-header-text, .x-panel-header-text {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/
}

.x-column-header-text, .x-panel-header-text {
    display: inline-block;
}

How to flip background image using CSS?

I found I way to flip only the background not whole element after seeing a clue to flip in Alex's answer. Thanks alex for your answer

HTML

<div class="prev"><a href="">Previous</a></div>
<div class="next"><a href="">Next</a></div>

CSS

.next a, .prev a {
    width:200px;
    background:#fff
}
 .next {
    float:left
}
 .prev {
    float:right
}
 .prev a:before, .next a:before {
    content:"";
    width:16px;
    height:16px;
    margin:0 5px 0 0;
    background:url(http://i.stack.imgur.com/ah0iN.png) no-repeat 0 0;
    display:inline-block 
}
 .next a:before {
    margin:0 0 0 5px;
    transform:scaleX(-1);
}

See example here http://jsfiddle.net/qngrf/807/

How can i flip images vertically and Horizontally at a time in react native.

You should use Animated from react-native. Code would be something like following.

import React, { Component } from 'react';

import { View, Text, TouchableOpacity, Animated } from 'react-native';

export default class AppProject extends Component
{

constructor(){

  super();

}

flip_Card_Animation=()=> {

    Animated.spring(this.animatedValue,{
      toValue: 0,
      tension: 10,
      friction: 8,
    }).start();
}

render() {

  this.SetInterpolate = this.animatedValue.interpolate({

    inputRange: [0, 180],

    outputRange: ['180deg', '360deg']

  })

  const Rotate_Y_AnimatedStyle = {

    transform: [

      { rotateY: this.SetInterpolate }

    ]

  }

  return (

    <View style={styles.MainContainer}>

        <Animated.Image source={{uri : 'https://reactnativecode.com/wp-content/uploads/2018/02/motorcycle.jpg'}} 
        style={[Rotate_Y_AnimatedStyle, styles.imageViewStyle]}>

        </Animated.Image>

        <TouchableOpacity style={styles.TouchableOpacity_button} onPress={this.flip_Card_Animation} >

          <Text style={styles.TextStyle}> Click Here Flip </Text>

        </TouchableOpacity>

    </View>

);
}

Hope its helpful.

---

Related Topics