GridTips: How to Enable CSS Transform in IE6-8 [Quick Tip]

quinta-feira, 6 de novembro de 2014

How to Enable CSS Transform in IE6-8 [Quick Tip]

Modern browsers have a lot of support for many CSS3 properties. You can radically request CSS animations, transformations and gradients among other things with ease. However, there are still many users of comparison versions of Internet Explorer versions that don’t accurately support a newer CSS3 properties. In this article, we will share discerning tips how to capacitate CSS renovate on IE6-8.

The CSS Transform skill concede us to renovate an component in two-dimensional or three-dimensional space. You can translate, scale, stagger and askance an component regulating CSS Transform. For complicated browsers like Firefox, Opera and Webkit formed browser support CSS Transform with their vendor-specific prefixes (using -moz-transform, -o-transform and -webkit-transform respectively), though we will not find it on Internet Explorer. So herein, we will use javascript library called cssSandpaper that allows cranky browser CSS Transforms, even in aged IE.

Recommended Reading: A Look Into: Cubic-Bezier In CSS3 Transition

Getting Started

First, download cssSandpaper from a Github Repository. Then, embody a following compulsory JavaScript libraries that comes with cssSandpaper.


script type="text/javascript" src="/path/to/js/EventHelpers.js"/script
script type="text/javascript" src="/path/to/js/cssQuery-p.js"/script
script type="text/javascript" src="/path/to/js/jcoglan.com/sylvester.js"/script
script type="text/javascript" src="/path/to/js/cssSandpaper.js"/script

The -sand-transform Property

cssSandpaper introduces a new prefixed skill to request a transformation. This new skill can be used in and with a other browser businessman prefixes like -moz-transform, -webkit-transform, or other browser prefixed properties, like so:


#container 
	-moz-transform: function-list;
	-webkit-transfrom: function-list;
	-sand-transform: function-list;
	transform: function-list;

The cssSandpaper inherits a customary CSS functions to perform a mutation such as revolution and scaling. The following is a list of a functions we can use within a -sand-transform property.

rotate(angle) is used to stagger an component in degrees or radians. e.g: -sand-transform: rotate(45deg)

scale(sx[, sy]) is used to scale an element. e.g: -sand-transform: scale(1[,2]) this means we scale a component on a X-axis according to a strange distance and on the Y-axis as twice a strange size.

skewX(ax) and skewY(ay) are used to askance an component around a x and y axes by a specified angles in degrees or radian. e.g: skewX(30deg)

matrix(a, c, b, d, tx, ty) is used to make 2D mutation pattern comprised of a specified 6 values.

Use Example

Assuming we have built a box regulating a div. And now we wish a box to pierce 200px horizontally divided from a initial position, and during a same time stagger it for 45 degrees. You can use cssSandpaper to grasp this effect, as follows:


#box
	width: 150px;
	height: 100px;
	-sand-transform: translate(200px, 0) rotate(45deg);

You can see a demo below. Do take note that we should demeanour during it in Internet Explorer 6-8 as well.

View Demo

Download Source

Conclusion

This might not be a many superb solution as we need to smoke-stack a garland of JavaScript libraries to grasp this elementary effect. But in box your trainer or customer insists on enabling revolution in Internet Explorer 8 (for whatever foolish reason), we can use cssSandpaper to make this happen.

<!–