{"id":22319,"date":"2014-11-06T18:01:42","date_gmt":"2014-11-06T10:01:42","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=22319"},"modified":"2025-04-24T17:10:00","modified_gmt":"2025-04-24T09:10:00","slug":"css-transform-ie","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-transform-ie\/","title":{"rendered":"How to Enable CSS Transform in IE6-8 [Quick Tip]"},"content":{"rendered":"

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

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

Recommended Reading:<\/strong> A Look Into: Cubic-Bezier In CSS3 Transition<\/a><\/p>\n

Getting Started<\/h2>\n

First, download cssSandpaper<\/strong> from the Github Repository<\/a>. Then, include the following required JavaScript libraries which come with cssSandpaper.<\/p>\n

\n<script type=\"text\/javascript\" src=\"\/path\/to\/js\/EventHelpers.js\"><\/script>\n<script type=\"text\/javascript\" src=\"\/path\/to\/js\/cssQuery-p.js\"><\/script>\n<script type=\"text\/javascript\" src=\"\/path\/to\/js\/jcoglan.com\/sylvester.js\"><\/script>\n<script type=\"text\/javascript\" src=\"\/path\/to\/js\/cssSandpaper.js\"><\/script>\n<\/pre>\n
The -sand-transform<\/em> Property<\/h2>\n
cssSandpaper introduces a new prefixed property to apply the transformation<\/strong>. This new property can be used in conjunction with the other browser-vendor prefixes like -moz-transform<\/code>, -webkit-transform<\/code>, or other browser-prefixed properties, like so:<\/p>\n
\n#container {\n    -moz-transform: <function-list>;\n    -webkit-transfrom: <function-list>;\n    -sand-transform: <function-list>;\n    transform: <function-list>;\n}\n<\/pre>\n
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<\/code> property.<\/p>\n