具有png图像的3D动画

Question

I try to animate a little image with HTML5/JS/CSS. 我尝试使用HTML5 / JS / CSS为小图像制作动画。 It should rotate in z-Axis. 它应该沿z轴旋转。 I know how to do it with x-/y-Axis, but z-Axis seems to be different. 我知道如何使用x- / y轴执行此操作，但z轴似乎有所不同。

I couldn't find a nice tutorial oder documentation on how to do that. 我找不到有关如何执行此操作的很好的教程文档。

Would be great, if someone could give me some hints! 如果有人可以给我一些提示，那就太好了！

Thanks so far! 到目前为止谢谢！

Answer 1

I think what you're interested in doing is best done with 3d rendering capabilities. 我认为您最感兴趣的是3D渲染功能。 WebGL can help you. WebGL可以为您提供帮助。

There are plenty of tutorials out there to help you get started with webGL. 有很多教程可以帮助您开始使用webGL。 It's quite simple and these are the general steps you need to take. 这很简单，这是您需要执行的一般步骤。

Init your canvas with webGL 使用webGL初始化画布
Create a new gl texture 创建一个新的gl纹理
Load an image and bind to the texture 加载图像并绑定到纹理
Create a basic quad and texture it when you render with your fancy new texture 创建基本的四边形并在使用精美的新纹理进行渲染时对其进行纹理化
Rotate you quad in 3d space 在3D空间中旋转四边形
Render! 渲染！

There is way too much code here to describe in details how to do this. 这里有太多代码无法详细描述如何执行此操作。 Look at the tutorials and come back if you have more questions. 查看教程，如果还有其他问题，请回来。

Good luck! 祝好运！

Answer 2

HTML: HTML：

<html>
    <body>
        <div id="rotated"> 
            HelloWorld 
        </div>
    </body>
</html>

CSS: CSS：

#rotated {
    height:200px;
    width:100px;
    background-color:red;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg); 
    transform: rotateZ(45deg);
}

In order to rotate an object in 3 dimensional space, you would use the HTML5 CSS3d transforms. 为了在3维空间中旋转对象，可以使用HTML5 CSS3d变换。 Make sure you add the styles shown above that "preserve-3d" rendering, otherwise your object will show a 2 dimensional representation of a 3d object. 确保添加上面显示的“ preserve-3d”渲染样式，否则对象将显示3d对象的二维表示。

If you want to change that style in javascript, it would be: 如果要在javascript中更改该样式，则为：

document.getElementById('rotated').style['webkitTransform'] = 'rotateZ(45deg)';
document.getElementById('rotated').style['mozTransform'] = 'rotateZ(45deg)';
document.getElementById('rotated').style['transform'] = 'rotateZ(45deg)';

There are plenty of CSS3d tutorials out there already. 已经有很多CSS3d教程。 Make sure you are using the latest version of a CSS3d-enabled browser like firefox or chrome. 确保您使用的是最新版本的支持CSS3d的浏览器，例如firefox或chrome。

具有png图像的3D动画

问题描述

2 个解决方案

解决方案1
1 2012-07-20 08:31:21

解决方案2
0 2012-12-10 03:40:00

具有png图像的3D动画

问题描述

2 个解决方案

解决方案1 1 2012-07-20 08:31:21

解决方案2 0 2012-12-10 03:40:00

解决方案1
1 2012-07-20 08:31:21

解决方案2
0 2012-12-10 03:40:00