三维动画与PNG图像

我尝试使用HTML5/JS/CSS动画制作一个小图片。它应该以Z轴旋转。我知道如何用x/y轴来做，但z轴似乎有所不同。三维动画与PNG图像

我找不到一个很好的教程或关于如何做到这一点的文档。

会很棒，如果有人能给我一些提示！

到目前为止感谢！

来源

2012-07-20 fluxim

z轴上的旋转实际上是你已经可以做的事情，图像在2D平面上。我想你在问什么是如何绕轴旋转，而不是绕Z轴旋转。 – Aesthete 2012-07-20 08:19:48

我觉得你有兴趣做的是最好完成与3d渲染功能。 WebGL可以帮助你。

There are plenty of tutorials在那里可以帮助您开始使用webGL。这很简单，这是你需要采取的一般步骤。

初始化支持WebGL
你的画布创建一个新的GL纹理
加载图像并绑定到纹理
创建一个基本的四和纹理它，当你与你看中的新的纹理渲染
在三维空间中旋转四边形
渲染！

这里有太多的代码来详细描述如何做到这一点。如果你有更多的问题，请看教程并回来。

祝你好运！

来源

2012-07-20 08:31:21 Aesthete

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

为了在三维空间中旋转对象，你可以使用HTML5 CSS3d变换。确保添加上面显示的“保留-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的教程在那里了。确保您使用的是最新版本的Firefox3或Chrome浏览器。

来源

2012-12-10 03:40:00

三维动画与PNG图像

回答

相关问题