CSS3 matrix3d() method Examples

First Page
Next Page

CSS3 matrix3d() method Examples

<!DOCTYPE html>
<html>
   <head>
      <title>CSS3 matrix3d() Method</title>
      <style type="text/css">
         .container{
            margin: 50px;
            width: 125px;
            height: 125px;
            perspective: 300px;
            border: 4px solid #d14e46;
            background: blue;
         }
         .transformed {
            -webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951,
            0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
            transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951,
            0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1); 
         }
      </style>
   </head>
   <body>
      <h2>Before Transform:</h2>
      <div class="container">
         <img src="css3.jpg" alt="CSS3">
      </div>
      <h2>After Transform:</h2>
      <div class="container">
         <img src="css3.jpg" class="transformed" alt="CSS3">
      </div>
   </body>
</html>

Output

First Page
Next Page