Switching between these two views was done with a 3D flip transition. The application used two views: a details view and an options view. Take for instance the Weather App for early iOS.

There is plenty of opportunity to use 3D transforms in between the interface, via transitions. 3D for websites works best when it adds to your interface, not replaces it. Instead, 3D transforms should be treated just like its fellow modern features like media queries, gradients, and transitions - as an add-on. But alas, CSS is not ideal for 3D modeling. It has since grown to handle applications. Rationaleīefore we dive into the third dimension, we owe it to our users to ask how they benefit from this feature. With CSS 3D transforms, front-end developers can enhance their designs by adding a new dimension to traditional websites. While these solutions are superb at producing explorable 3D environments, they can be overkill for the main stuff of the web: interfaces. WebVR and augmented reality lie around the corner. Rendering 3D graphics on the web has been around for years. With CSS 3D transforms, web designers can move past their print counterparts and explore a new realm in graphic design. Web designers were finally able to catch up to print designers.

With the introduction of CSS transforms, elements could be shifted, rotated, slanted, squashed and stretched.

Transform css