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元素的转换

回答

相关问题