<!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;
//some transformations
/*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);
/*************
* None of them will work in < IE9
*************/
}
</style>
<div id='transformed'>
Some text here
</div>
<script type="text/javascript" src="./tmatrix.packed.js" ></script>
<script type="text/javascript">
//create instance
var t = new tmatrix();
//apply same transformations
//skew
t.skewX(-25);
//translate
t.translateX(100);
//rotate
t.rotate(20);
//get IE CSS transformation matrix
document.getElementById("transformed").style.filter = t.getIE();
/*************
* Now it's somewhat < IE9 compatible
*************/
</script>
</body>
</html>
|
Download
