CSS 3D Transformations - Introduction
Learning outcomes:
- 3D rendering on the web
- The evolution of 3D transformations in CSS
Introduction
Ever since the advent of CSS on the World Wide Web, there has been a great deal of innovations brought to this mere styling language. The whole catalog is so huge to explore that it could take a whole book to just list the innovations and the brief history that led to them.
One that we're particularly interested in talking about now is that of 3D transformations.
3D transformations in CSS essentially bring 3D capabilities to CSS natively. But 3D transformations aren't the pioneer in the realm of 3D rendering on the web; that has existed and been done well long before their inception, albeit it wasn't so simple to work with.
Let's dive into the early days of the web and travel on from there to explore the evolution of the ecosystem to work with 3D on the web.
Although this hasn't that much to do with CSS transformations, it's a worthwhile discussion to have in order to appreciate the innovations that the web has gone through in bringing 3D rendering capabilities into CSS.
3D rendering on the web
For a long time, 3D rendering capabilities existed, in fact, flourished, in web browsers. Developers had a lot of tools to bring 3D objects to life on the web. There was Flash, Java applets, and APIs in JavaScript (including canvas and WebGL).
But operating in these tool wasn't easy at all! It required some sophisticated knowledge of graphics and 3D rendering, in some cases, even some other languages.
Just to implement a simple 3D hover effect to flip an interface element, we need to go through a lot of strenuous work.
The point is that while it was possible to apply 3D rendering to web interface elements, it was not an easy feat to do so.
The lack of a simplistic way to bring 3D into designing interfaces led to a W3C Working Draft being published in 2009 to discuss on a potential set of features to be introduced into CSS to work with 3D via CSS transforms.
Soon, WebKit and Safari followed feat and implemented this working draft as an experimental feature in 2009.
-webkit
vendor prefix.This new technology was extremely promising — to make a simple <div>
element get a 3D transition, all that was needed was transition
and transform
(-webkit-transform
back then) with a 3D transform function.
Imagine how revolutionary this would have been!
Speaking of 3D transformations, a specification already existed for CSS 2D transformations, and so it was quite natural to extend that spec with 3D concepts.
Soon, Google Chrome also adopted this working draft and joined company with Safari in bringing 3D transformations to life. A short period later, other browsers also adopted CSS 3D transformations, and it started to become a standard.
With time and newer releases of all the major browsers, the incompatibilities in CSS 3D transformations reduced and we ultimately got closer and closer to a unified, non-prefixed feature set, starring the transform
property with new 3D functions and a couple other properties meant to be used along with 3D magic.
These properties included:
backface-visibility
controlling the visibility of the backface of an element, when it's rotated;transform-style
controlling the rendering context of an element;perspective
for establishing perspective before applying 3D transformations (without perspective, 3D transformations don't have depth); andperspective-origin
specifying the vanishing point for perspective.
Today, CSS 3D transformations are well supported across all major browsers. They are extremely simple to use and require almost no prior 3D graphics knowledge.
What else could we ask for?
Spread the word
Think that the content was awesome? Share it with your friends!
Join the community
Can't understand something related to the content? Get help from the community.