CSS prefix issue and Modernizr Prefixed

If you are doing any CSS development using Javascript you must be aware of prefixes like -moz-transform, -webkit-transform, -o-transform required by Firefox, Safari and Opera. Safari and Chrome use the same –webkit- prefix.

You can use  Modernizr to simplify the task.

the article Modernizr Prefixed by Andi Smith is a definite read.

In this article Andi explains how you can use Modernizr to simplify your life.

Typical usage:

In HTML page

<script src="js/modernizr.js"></script>

In the Javascript

var car_cont=document.getElementById('carousel_container') ;
    
car_cont.style[Modernizr.prefixed('perspective')]  = '1100px';

This is equivalent to the CSS statement

-webkit-perspective: 1100px;
moz-perspective: 1100px;
-o-perspective: 1100px; ----and so on.

Some more references from W3Schools

1. CSS3 Browser Support Reference
2. CSS Reference
3. example: CSS3 perspective Property
   

CSS 3d Transforms for Safari, Chrome and Firefox

I am now developing a 3d Carousel for use in different browsers. It uses 3d transforms available in Safari, Chrome and Firefox. Unfortunately IE 9 and Opera do not seem to support it.

The following references are excellent resources.

1. Using 2D and 3D Transforms is an excellent place to start
2. CSS3 Transitions, Transforms and Animation Tutorial has excellent tutorial.
3. Intro to CSS 3D transforms has very good step by step approach which explains the fundamentals of transforms and how to implement it with CSS3.
4. Cloud Carousel - A 3d Carousel in Javascript does not use CSS 3d and done in Javascript
5. CSS Infos is an excellent reference site.
6. Ceaser CSS EASING ANIMATION TOOL is worth visiting.
7. CSS3 tools is also worth visiting.
8. Rotating Image Using JQuery has also some introductory information.