Question

I would like to animate things in 3D space. I know this is possible with CSS and HTML5, but I can’t find a good tutorial for practical use!

I found this website as an example. You can select text etc. All the time.
Can somebody give a very easy to understand and little example how this works? I see the source code but I don’t really understand it…

Is this CSS3 or HTML5 or both?

How much JavaScript do I need?

Which browsers support this?

Answer 1

Its all css3 and javascript. Just inspect the site in your favorite inspector, dig into the dom, and you’ll see something like

-webkit-perspective: none;
-webkit-perspective-origin: 200px 200px;
-webkit-transform: matrix3d(-0.9386958080415784, -0.197569680458564, 0.2825179663820851, 0, 0, 0.8194947008605812, 0.5730867606754029, 0, -0.34474654452969944, 0.537954139890128, -0.7692562404101148, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
-webkit-transition-delay: 0s;
-webkit-transition-duration: 16s;
-webkit-transition-property: all;
-webkit-transition-timing-function: linear;

how much javascript you need depends on how you want to implement it. It can be ‘a lot’ or ‘a little’.

The more modern a browser, the better the change it will run well. Check here to see which browsers support what.