«

»

Dec 04

Print this Post

CSS3 – 3D transformation – inspired by meet.js

meet.js, Poznań, 2011-11-25

Last Friday, 25th of November, I attended to meet.js event in Poznań. (Well it was two weeks ago but just after the meeting I started to write this post…) The meeting started quite early at 6pm. Usually I’m still at work at this time but this time I made it and left the office around 5.20 to get to meet.js.

What did I find there? A lot of positive people, mostly front-end developers who are up to talk about and share their ideas, experiences. This is how PHPCon should looks like next year! ;)

Talk of Bartek Szopka could be called “tani blichtr” (Google tells me it could be translated to “cheap tinsel” but I’ve already heard “cheap deal” too) by some of my colleagues but it inspired me to write this short post.
The slides itself were interesting form a technical and visual point of view. It was HTML5&CSS3 presentation about 3D transformations in CSS3. Not only presented the syntax of CSS3 (webkit) transformations but it was interactive and with small sliders Bartaz could change values of CSS properties and therefore change the view of elements on each slide.

Unfortunately, author told us he hadn’t had any opportunity to use 3D transformation in a big scale anywhere else than the presented slides. But, honestly, he wouldn’t like CSS3 3D transformations be used too much. It’s nice just to add some more subtle effects (not too much) to make your site more attractive. And I agree.

CSS 3D transformation example*

Those transformation works so far only with modern web browsers (Safari, Chrome, Firefox10, IE10). We’ll have to wait till the possibility to display it everywhere will be common. As I’ve mentioned in previous paragraph those transformations are really nice visually but they shouldn’t be used too much. Here is a simple example how we can use them. This is a simple form with few pages.

I didn’t spend much time on this but maybe I’ll describe it more later. Still I don’t like the effect which is fired when you click “Finish” button. The X axis should be more in the middle of cube. I’ll have to learn more about this ;) But I think this example shows the best what Bartaz meant.

More links:

* – If you don’t see any 3d effects on *nix operating systems (in example: Ubuntu) 1. Make sure your graphic card can handle 3d ;) (or make sure you installed all needed 3d drivers) and then go to chrome://flags, enable “Replace the list of rendering software” (in polish: “Zastąp listę renderowania programowego”) restart Chrome and… done! :)

Permanent link to this article: https://blog.lukaszewski.it/2011/12/04/css3-3d-transformation-inspired-by-meet-js/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>