File: css_transform.html

Recommend this page to a friend!
  Classes of Arturs Sosins   Tmatrix   css_transform.html   Download  
File: css_transform.html
Role: Example script
Content type: text/plain
Description: Crossbrowser CSS transform
Class: Tmatrix
Manipulate matrices to transform Web page elements
Author: By
Last change:
Date: 12 years ago
Size: 1,909 bytes
 

Contents

Class file image Download
<!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>