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

问题描述

我想在3d空间中动画。我知道这是可能与css和html5，但我找不到
a好的教程实际使用！

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 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屋！