CSS 3D动画，怎么样？ [英] css 3d animation, how?

问题描述

我想在三维空间动画的东西。我知道这是可能的CSS和HTML 5，但我无法找到 一个很好的教程实际使用！

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!

我发现本网站作为一个例子。您可以选择文本等所有的时间。 有人可以给出一个很容易理解，小例子是如何工作的？我看到源$ C ​​$ C，但我真的不明白......

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 sourcecode but I don't really understand it...

这是CSS3和HTML5或两者兼而有之？

is this css3 or html5 or both?

多少的JavaScript我需要？

how much javascript do I need?

该浏览器支持呢？

推荐答案

所有的CSS3和JavaScript。只要检查该网站在你最喜欢的检查，深入到DOM，你会看到类似

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;

多大的JavaScript，你需要取决于你想如何实现它。它可以是很多或一点点。

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.

这篇关于CSS 3D动画，怎么样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！