CODEWITHSUNDEEP
css
compass00
compass00

Reputation: 197

how to flip and rotate an image using css in chrome

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 ?

Upvotes: 2

Views: 10623

Answers (3)

Amirhossein Safari
Amirhossein Safari

Reputation: 21

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

}

Upvotes: 1

Stefan Gruenwald
Stefan Gruenwald

Reputation: 2640

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>

Upvotes: 1

Michael Peterson
Michael Peterson

Reputation: 1123

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

Upvotes: 4

Related Questions