Icontem

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: 8 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>