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