how to flip and rotate an image using css in chrome

Question

I tried to flip an image and then rotate it using css.

This is the page

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title> Mounts </title>
        <style type="text/css">
            img {
                -webkit-transform: rotate(180deg);
                -webkit-transform: scaleX(-1);
            }
        </style>
    </head>
    <body>
        <img src='1.jpg'>
    </body>
</html>

But one of the transform functions was disabled by chrome.

Is it illegal to use more than one transform function ?

If you want to have different delays for these see: CSS3 transition scale but not translation (or use a keyframe animation) (using @MichaelPeterson's answer below) — dc5
– dc5, Commented Aug 13, 2013 at 22:59

Michael Peterson · Accepted Answer · 2013-08-13 22:48:55Z

4

You can combine them in one statement:

transform: rotate(180deg) scaleX(-1);

Or you could use the matrix property: http://www.w3schools.com/css3/css3_2dtransforms.asp

There's even generators for the code, such as: http://www.css3maker.com/css3-transform.html

answered Aug 13, 2013 at 22:48

Michael Peterson

1,1236 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stefan Gruenwald · Accepted Answer · 2014-01-24 01:01:43Z

I had problems with Lea Verou's rotating sign too. It did not work without modification in webkit. This is how I solved it:

    <style>
    div {
  width: 9em;
  padding: .6em 1em;
  margin: 2em auto;
  background: yellowgreen;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 1000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-play-state: paused;
  animation: spin 1s linear infinite;
  animation-play-state: paused;
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
    }
@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(1turn);
  }
}

    div:hover {
  -webkit-animation-play-state: running;
  animation-play-state: running;
}
</style>


    <div ontouchstart="">Hover over me and watch me spin!</div>

Amirhossein Safari · Accepted Answer · 2019-10-06 22:49:04Z

1

I had that problem and I could solve it in this way: (I just wanted to rotate and flap a photo with class of left-img) (and enjoy;))

.left-img{
-webkit-transform:rotate(-90deg) scaleX(-1);
-moz-transform: rotate(-90deg) scaleX(-1);
-ms-transform: rotate(-90deg) scaleX(-1);
-o-transform: rotate(-90deg) scaleX(-1);
transform: rotate(-90deg) scaleX(-1);

}

answered Oct 6, 2019 at 22:49

Amirhossein Safari

212 bronze badges

Collectives™ on Stack Overflow

how to flip and rotate an image using css in chrome

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related