3D Transformations in HTML 5 and CSS3

CSS 3D Transform module provides all the functions we need to transform objects in 3D space using HTML 5. Functions like scale, rotate, and translate are available in this new standard. 

Jennifer Yu, program manager at Microsoft write: 

Like CSS3 2D Transforms, 3D 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.


X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now