<!DOCTYPE html>
<!--
/*************************************************************
* This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
* Feel free to distribute and modify code, but keep reference to its creator
*
* Tmatrix class generates transformation matrix from provided transformations.
* It can return matrix object, apply absolute or relative transformation to canvas context
* or return CSS matrix filter string for IE browsers.
*
* For more information, examples and online documentation visit:
* http://webcodingeasy.com/JS-classes/Calculate-transformation-matrix
**************************************************************/
-->
<html>
<head>
</head>
<body>
<style>
#transformed
{
margin-top: 200px;
border: 2px solid black;
width: 200px;
height: 200px;
}
</style>
<div id='transformed'>
Some text here
</div>
<script type="text/javascript" src="./tmatrix.packed.js" ></script>
<script type="text/javascript">
/*****************************
INSTEAD OF WRITING THESE:
IE9
-ms-transform: skew(-25deg) translate(100px) rotate(20deg);
FireFox
-moz-transform: skew(-25deg) translate(100px) rotate(20deg);
Safari and Chrome
-webkit-transform: skew(-25deg) translate(100px) rotate(20deg);
Opera
-o-transform: skew(-25deg) translate(100px) rotate(20deg);
CSS3 standard
transform: skew(-25deg) translate(100px) rotate(20deg);
< IE9
filter: progid:DXImageTransform.Microsoft.Matrix
(M11='1', M12='0', M21='0', M22='1', Dx='0', Dy='0', sizingMethod='auto expand',);
*********************************/
//create instance
var t = new tmatrix();
//create transformation matrix
//skew
t.skewX(-25);
//translate
t.translateX(100);
//rotate
t.rotate(20);
//apply transformation to element (crossbrowser)
t.CSStransform(document.getElementById("transformed"));
</script>
</body>
</html>
|
Download
