3D Transformations in IE 10

3D Transformations in IE 10

IE 10 will be loaded on your Windows when you download Windows 8 on your machine. But before you install Windows 8 developer preview, I highly recommend you reading Mamta's blog Comprehensive Resource Guide to Windows 8 Developer Preview

Once you have Windows 8 successfully installed and running, you may notice Internet Explorer 10 is loaded on it.

Yay! IE 10 is developed keep in mind new HTML 5, CSS3 and other Web 2.0 needs and features. One of the newest features supported in HTML 5 and CSS3 is 3D transform. So, you don't need to build 3D graphics and display in the browser to have a 3D graphics. You can actually use your IE 10 as a canvas and draw 3D drawings on it.

I was reading CSS3 3D Transform in IE10 blog written by IE team and it is interesting to see how IE is evolving. It sounds similar to what Google is doing with Chrome with HTML 5 and CSS3 support.

CSS3 Transforms provides functions and values for the CSS transform and transform-origin properties that apply geometric transformations operations to HTML elements. CSS 3D Transforms extends the transforms functions to enable 3D transforms. The rotate(), scale(), translate(), skew(), and matrix() transform functions are expanded to encompass the 3D space with a z-coordinate parameter—or in the case of matrix3d(), an extra 10 parameters—and by spawning additional transform functions, for example, rotateZ() and scaleZ().

A new perspective transform function gives transformed elements depth by making distant points appear smaller.

CSS3 3D Transforms also adds a few new CSS properties. In addition to the transform and transform-origin properties, IE10 supports vendor-prefixed perspective, perspective-origin, backface-visibility, and the flat value of transform-style.

If you want to learn more about HTML 3 and CSS 3, try HTML 5 Learning Center on C# Corner