Back in 2009 an extension to CSS was pushed forward from the WebKit development team. Using CSS it became possible to display and transform web elements three-dimensionally. This extension was appropriately called 3D Transforms.
At the time of its release, browser compatibility for this technology was very limited, but great advancements have been made since. Starting with compatibility in only Safari for Mac and iOS, support followed for Chrome in August 2010 and from early this year compatibility in Firefox 10, which was released in January 2012.
Like with a number of their other technologies Microsoft’s Internet Explorer is slightly behind, being the last of the most popular browsers to incorporate CSS3 3D Transforms. Don’t be fooled by how shiny and contemporary IE9 is portrayed in its recent TV ads, it still isn’t CSS3 3D Transforms compatible. This being said IE10 aims to be compatible and can be tested by downloading preview releases here.
Note: To view the examples below you will need to have a web browser which supports CSS 3D Transforms. That is currently Safari, Chrome, Firefox 10 and IE10 Platform Preview.
User Experience
If you look about the web you can find many examples of 3D transforms. Many of these trigger into action as a result of user input, usually a click or mouse over. For example, below is a familiar Call-to-action button similar to those found on millions of websites. However, in this example I’ve made the button has the ability to transform three-dimensionally, but will only initiate this function once a user’s mouse hovers over it. This introduction of an animation can be used as an added way of drawing attention to a button and its function as the user passes over it whilst scanning the page. In my opinion for the best results this feature could work alongside the common use of bright colourful buttons with large text to draw the user’s eye and should not be seen as a replacement for these standard buttons.
In the case that the trigger for these to function is hovering over the CTA, what does this mean for smart phone and tablet users?
As we know, touch screen users do not have the ability to hover like a mouse user can. First thoughts are that this experience would be missed. However, due to the way this example has been written, users on a tablet such as an iPad can touch the button, see the animation and then touch again to be taken through to the URL destination. This is one way of handling the missing hover function on a tablet; you can find other examples on the web.
3D Transform – Future implementation
Aside from using CSS 3D Transform to improve your click through rate, it can be used to aid animated design. In recent years we have seen a great rise in the number of info-graphics due to their ability to offload and breakdown data in a neat and visually pleasing way. As an extension to info-graphics we are now starting to see animated info-graphics especially since the recent release of HTML5 i.e Plat4M. The use of beautiful design with dynamically updated data/content is what I think contemporary web design is all about.
I definitely foresee the use of CSS3 Transform somewhere in that mix.
Below is an example of using 3D Transform to create a 3D Cube. It has been created with smart phones and tablets in mind. Use your mouse, finger or directional keys to control its movement.
Note: This works best in Safari and Chrome. It works in Firefox 10 but has problems with displaying the correct perspective.
(You may need to click this image to start the animation)
Conclusion
CSS3 3D Transforms is exciting and future implementations of it have great potential.
Could we see a more animated web in the years to come? I certainly think so, however, it is still at a stage where many people may not be able to enjoy the experience unless running the latest version of their web browser. This definitely should be kept in mind when designing an element utilizing this functionality so as not to exclude lots of people from viewing your 3d creations.
As a web designer of course I love beautiful designs, but when designs animate in order to help their users make a decision and improve and add enjoyment to their experience at the same time, then of that I am a real fan. Perhaps an even bigger advocate when this type of animation is three dimensional.
Further reading
https://www.w3schools.com/css3/css3_3dtransforms.asp
JavaScript for controls using mouse keys and tablet touch taken from Paul Hayes’s tutorial on “CSS 3D cube with touch gestures, click and drag”
If you’re interested in how Found could supercharge your digital performance across SEO, PPC, Social and Digital PR, then get in touch today to speak to a member of the team.
