File: ie_fallback.html

Recommend this page to a friend!
  Classes of Arturs Sosins   Tmatrix   ie_fallback.html   Download  
File: ie_fallback.html
Role: Example script
Content type: text/plain
Description: IE fallback example
Class: Tmatrix
Manipulate matrices to transform Web page elements
Author: By
Last change:
Date: 12 years ago
Size: 1,849 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; //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>