具有png图像的3D动画

Question

我尝试使用HTML5 / JS / CSS为小图像制作动画。 它应该沿z轴旋转。 我知道如何使用x- / y轴执行此操作，但z轴似乎有所不同。

我找不到有关如何执行此操作的很好的教程文档。

如果有人可以给我一些提示，那就太好了！

到目前为止谢谢！

Answer 1

我认为您最感兴趣的是3D渲染功能。 WebGL可以为您提供帮助。

有很多教程可以帮助您开始使用webGL。 这很简单，这是您需要执行的一般步骤。

使用webGL初始化画布
创建一个新的gl纹理
加载图像并绑定到纹理
创建基本的四边形并在使用精美的新纹理进行渲染时对其进行纹理化
在3D空间中旋转四边形
渲染！

这里有太多代码无法详细描述如何执行此操作。 查看教程，如果还有其他问题，请回来。

祝好运！

Answer 2

HTML：

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

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);
}

为了在3维空间中旋转对象，可以使用HTML5 CSS3d变换。 确保添加上面显示的“ preserve-3d”渲染样式，否则对象将显示3d对象的二维表示。

如果要在javascript中更改该样式，则为：

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

已经有很多CSS3d教程。 确保您使用的是最新版本的支持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