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

问题描述

我想在 3D 空间中制作动画.我知道这可以通过 CSS 和 HTML5 实现，但我找不到适合实际使用的好教程！

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…

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