CSS3 Multiple 2D Transformation Examples

First Page
Next Page

CSS3 Multiple 2D Transformation Examples

<!DOCTYPE html>
<htmlgt;
   <head>
      <title>CSS3 Multiple 2D Transformation</title>
      <style type="text/css">
         img {
            -webkit-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); 
            -moz-transform: translate(200px, 50px) rotate(180deg) scale(1.5) 
            -ms-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); 
            transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);     
         }
         .box{
            margin: 50px;
            width: 108px;
            height: 136px;
            background: url("css3.jpg") no-repeat;
         }
      </style>
   </head>
   <body>
      <div class="box">
         <img src="css3.jpg" alt="CSS3">
      </div>
   </body>
</html>

Output

First Page
Next Page