flipping image horizontal

by PHPMySQLTalk | Sep 26, 2010 | CSS | 0 comments

You can use this trick to flip an image horizontal also it works on IE. Just add the following CSS class to your image.

Note: It works with source images only (not background image)

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

Demo:
before:

After:

Image rotate using CSS

by PHPMySQLTalk | Jun 17, 2010 | CSS | 0 comments

You can make an image rotate using CSS as follow:

  <style type="text/css">
    #nice a:hover img {
    -moz-transform: rotate(-3deg);
   }
  </style>
<center id="nice">
<a href="http://google.com"><img src="http://phpmysqltalk.com/wp-content/uploads/2010/06/tom-and-jerry1.jpg" alt="" title="tom-and-jerry1" width="379" height="285" class="aligncenter size-full wp-image-128" /></a>
</center>