三維動畫與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圖像

回答

相關問題