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

By . in Coding. Updated on .

Modern browsers have a lot of support for most CSS3 properties. You can essentially apply CSS animations, transformations and gradients among other things with ease. However, there are still many users of older versions of Internet Explorer versions that don’t exactly support the newer CSS3 properties. In this article, I will share quick tips how to enable CSS transform on IE6-8.

The CSS Transform property allow us to transform an element in two-dimensional or three-dimensional space. You can translate, scale, rotate and skew an element using CSS Transform. For modern browsers like Firefox, Opera and Webkit based browser support CSS Transform with their vendor-specific prefixes (using -moz-transform, -o-transform and -webkit-transform respectively), but you will not find it on Internet Explorer. So herein, I will use javascript library called cssSandpaper that allows cross browser CSS Transforms, even in old IE.

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

Getting Started

First, download cssSandpaper from the Github Repository. Then, include the following required JavaScript libraries which 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 property to apply the transformation. This new property can be used in conjunction with the other browser vendor 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 the standard CSS functions to perform the transformation such as rotation and scaling. The following is a list of the functions you can use within the -sand-transform property.

  • rotate(angle) is used to rotate an element 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 the element on the X-axis according to the original size and on the Y-axis as twice the original size.
  • skewX(ax) and skewY(ay) are used to skew an element around the x and y axes by the specified angles in degrees or radian. e.g: skewX(30deg)
  • matrix(a, c, b, d, tx, ty) is used to make 2D transformation matrix comprised of the specified six values.

Use Example

Assuming we have built a box using a <div>. And now you want the box to move 200px horizontally away from its initial position, and at the same time rotate it for 45 degrees. You can use cssSandpaper to achieve this effect, as follows:

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

You can see the demo below. Do take note that you should look at it in Internet Explorer 6-8 as well.

Conclusion

This might not be the most elegant solution as we need to stack a bunch of JavaScript libraries to achieve this simple effect. But in case your boss or client insists on enabling rotation in Internet Explorer 8 (for whatever nonsensical reason), you can use cssSandpaper to make this happen.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail