Question

我尝试使用HTML5 / JS / CSS为小图像添加动画效果。它应该在z轴上旋转。我知道如何使用x- / y-Axis，但z轴似乎是不同的。

我找不到关于如何做到这一点的精彩教程文档。

如果有人可以给我一些提示，那会很棒！

到目前为止感谢！

Answer 1

我认为您感兴趣的是使用3d渲染功能完成最佳。 WebGL可以帮助您。

There are plenty of tutorials可以帮助您开始使用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);
}

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

如果你想在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 个答案: