dom元素的轉換

起初我對HTML5的canvas元素感到非常興奮。但是，現在我明白它的目的是什麼，這對我的想法不起作用。dom元素的轉換

基本上我想在第三維上顯示一個無序列表，通過在它上面繞y軸稍微旋轉一下。沒有什麼「基本」的。有沒有什麼jQuery插件可以幫助我創造這種幻覺？如果不是，我可能不得不嘗試自己創建一個。見下文。

<div id="angleit" class="padding"> 
    <ul> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
    </ul> 
</div>

來源

2011-03-10 Binaryrespawn

我會自己創建它。

更糟糕的是，我已經做了：http://annejan.com/html5/demo/jinx.js

注意這個例子是畫布，但算算應該還有其他元素的工作。

下面的代碼允許以2個角度旋轉，添加第三個角度是微不足道的。

對於您的確切問題，甚至可以簡化！

this.rotateXY = function(angleX, angleY) { 
    // might do with some more hard coding ;) 
    var xy, xz, yz; 

    sinRY = Math.sin(angleX * TO_RADIANS); 
    cosRY = Math.cos(angleX * TO_RADIANS); 
    sinRX = Math.sin(angleY * TO_RADIANS); 
    cosRX = Math.cos(angleY * TO_RADIANS); 

    xy = (cosRX*this.y)-(sinRX*this.z); 
    xz = (sinRX*this.y)+(cosRX*this.z); 
    yz = (cosRY*xz)-(sinRY*this.x); 
    this.x = (sinRY*xz)+(cosRY*this.x); 
    this.y = xy; 
    this.z = yz; 
}

來源

2011-03-10 13:56:36

我想旋轉約30度左右div內的ul。我認爲只有x和z座標本身才會改變。我需要一個畫布有一個Z軸，或者我可以簡單地使用jQuery來操作DOM嗎？ – Binaryrespawn 2011-03-10 18:15:42

在2D平面中渲染3D的代碼在鏈接中很好。 – 2011-03-10 19:41:28

CSS 3D只支持一些webkit瀏覽器。其他瀏覽器只能使用2D變換（縮放和傾斜）來模擬3D行爲。

爲此目的jQuery 2D Transformation Plugin是跨瀏覽器的IE6 +解決方案。

如果您需要CSS 3D變換，那麼您可以使用Modernizr來檢查它們是否受支持，否則使用jQuery 2D Transformation Plugin回退到2D仿真。

來源

2011-03-10 13:56:08

我認爲這肯定比我下面的路線更容易;） – 2011-03-10 14:06:54

@the厄運：我只是不知道帆布用來做DOM元素的變換，或者也許我只是不明白的問題。我想知道爲什麼我的回答是不被提問者接受的。 – 2011-03-10 22:25:38

dom元素的轉換

回答

相關問題