CSS3 matrix3d() method Examples
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