Cross-Browser Way to Flip HTML/Image via JavaScript/Css

Cross-browser way to flip html/image via Javascript/CSS?

The following CSS will work in IE and modern browsers that support CSS transforms. I included a vertical flip class just in case you might want to use it too.

.flip-horizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph;
}
.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv; /*IE*/
    filter: flipv;
}

How to flip a moving image horizontally when it reaches a certain point on the screen

I hope the following snippet can be of help, please do not hesitate to ask if there is any doubt.

const img = document.getElementById('img');
const container = img.parentElement;

let left = 0;
let sign = 1;

let ticking = false;

img.style.left = `${left}px`;
img.style.transform = `scaleX(${sign})`;

function translate() {
  // YOU CAN CHANGE THE SPEED BY CHANGING THIS.
  left += sign * 10;
    
  if (left + img.offsetWidth >= container.clientWidth) {
    // CASE: RIGHT LIMIT.
    left = container.clientWidth - img.offsetWidth;
    sign *= -1;
  } else if (left <= 0) {
    // CASE: LEFT LIMIT.
    left = 0;
    sign *= -1;
  }
    
  if (ticking) {
    return;
  }
  
  // THIS WILL RUN THE CALLBACK WHEN THE BROWSER IS READY TO DO A REPAINT. (JUST A PERFORMANCE IMPROVEMENT)
  requestAnimationFrame(() => { 
    img.style.left = `${left}px`;
    img.style.transform = `scaleX(${sign})`;
    
    ticking = false;
  });
  
  ticking = true;
}

setInterval(translate, 10);

#img {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s linear;
}

<img id='img' src='https://i.imgur.com/kDDFvUp.png' />

Flip card effect for non-webkit browsers

This seems to fit the bill...

http://lab.smashup.it/flip/

Quote: Flip is compatible with: Firefox, Chrome/Chromium, Opera, Safari and even IE (6,7,8)

---

Here is another one...

http://dev.jonraasch.com/quickflip/examples/

http://jonraasch.com/blog/quickflip-2-jquery-plugin

---

There is no "flip" in this one, but perhaps you'll find this helpful in another way...

http://malsup.com/jquery/cycle/browser.html

---

This one seems powerful, but you'll have to program the flip yourself...

https://github.com/heygrady/transform/wiki

Background flipped tiling using Javascript

You can do this with CSS on most browsers, via the transform property (and for older IE, a fallback filter); article here. E.g.:

img.flipped {
    -moz-transform:    scaleX(-1);
    -o-transform:      scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform:         scaleX(-1);
    filter:            FlipH;
    -ms-filter:        "FlipH";
}

Live Example (using your gravatar) | Source

It even works back in IE6, thanks to the fallback filter. Wow. And of course, IE9 (transform is supported), Chrome, Firefox, Opera...

Doing that for the background is likely to be a bit of a pain, probably requiring absolute positioning and a negative z-index, but...

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/

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 rotate an image using client side solution

Firefox, Safari and Opera support this:

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);

you can also do this in IE8, maybe even 7(?):

position: absolute;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

rotate an element using JS:

var deg = 90
$('element').style.MozTransform = 'rotate(' + deg + 'deg)';
$('element').style.WebkitTransform = 'rotate(' + deg + 'deg)';

edit:

wow, according to http://msdn.microsoft.com/en-us/library/ms532972%28VS.85%29.aspx the rotation works for IE 5.5!

How to rotate an image on click

Firstly note that your issue is because the selector is incorrect. It should be $('#showLayers') not $('#showLayers img') - or even just $(this) as you're in the scope of the click handler.

Secondly, note that you can improve the logic by using CSS for the animation and simply toggling the class in JS as needed:

$('#showLayers').click(function() {  $(this).toggleClass('rotate');});

#showLayers {  transition: transform 0.3s;}
.rotate {  -webkit-transform: rotate(180deg);  -moz-transform: rotate(180deg);  -o-transform: rotate(180deg);  -ms-transform: rotate(180deg);  transform: rotate(180deg);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><img id="showLayers" class="miniToolbarContant" src="https://i.imgur.com/J5YLlJvl.png" width="250" />

Rotate webpage via code?

Here's another solution based on the matrix filter which works in IE.

http://www.boogdesign.com/examples/transforms/matrix-calculator.html

The css for -30 degrees would be:

.rotate
{
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand')";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand');
  -moz-transform:  matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
  -webkit-transform:  matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
  -o-transform:  matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
}

Test page example:

<html>
  <head>
    <style type="text/css" media="screen">
    body {
      -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand')";
      filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand');
      -moz-transform:  matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
      -webkit-transform:  matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
      -o-transform:  matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
    }
    </style>
  </head>
  <body>
    <p>Testing</p>
    <p><a href="http://www.boogdesign.com/examples/transforms/matrix-calculator.html">Matrix calculator here</a></p>
  </body>
</html>

For more information on calculating the matrix cooridinates see:

http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx
http://www.boogdesign.com/b2evo/index.php/2009/09/04/element-rotation-ie-matrix-filter?blog=2

---

Related Topics