0

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

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

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

到目前为止感谢！

4

2 回答 2

1

我认为你有兴趣做的最好是使用 3d 渲染功能。WebGL 可以帮助你。

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

  • 使用 webGL 初始化你的画布
  • 创建一个新的 gl 纹理
  • 加载图像并绑定到纹理
  • 当你用你喜欢的新纹理渲染时，创建一个基本的四边形和纹理
  • 在 3d 空间中旋转你的四边形
  • 使成为！

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

祝你好运！

于 2012-07-20T08:31:21.917 回答
0

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。

于 2012-12-10T03:40:00.960 回答