javascript - jQuery 3D 戒指

Question

我想做一个和这个网站一样的3D效果http://www.asanimedia.com/

但我在 jquery 中需要它，而不是在 flash 中。

我尝试过 JQUERY 3D 引擎，通过使用这个库我可以做类似的事情，但我需要 99% 相同，我现在做不到

谁能告诉我该怎么做？或者有没有更好的3D库

这是我目前使用的 3D 引擎 http://www.devirtuoso.com/2009/09/3d-plane-for-jquery-3d-engine/

Answer 1

好的，所以只使用 jQuery（没有 css 转换，这意味着它应该非常兼容），我想出了以下内容：

http://jsfiddle.net/andyc/ZncP6/

var numOfBoxes = 10;
var boxContainer = $(".boxcontainer");
var gap = 360 / (numOfBoxes);

for (var i = 0; i < numOfBoxes; i++) {
    $("<div>").attr("data-offset", (gap * i)).addClass("box").appendTo(boxContainer);
}

$(".box").each(function() {
    var box = $(this);
    positionBox(box, 0);
});


$({position: 0}).animate({position: 360}, {
    duration: 4000,
    step: function() {
        var currentPosition = this.position;
        console.log(currentPosition);
        $(".box").each(function() {
            var box = $(this);
            positionBox(box, currentPosition);
        });
    }
});

function positionBox(box, position) {
    var newPosition = position + box.data("offset");
    var newRadianPosition = convertToRadians(newPosition);

    var x = Math.cos(newRadianPosition) * 200 + 200;
    var y = Math.sin(newRadianPosition) * 100 + 200;

    var absolutePosition = newPosition % 360;
    if (absolutePosition > 180) {
        box.css("z-index", "0");
    }
    else {
        box.css("z-index", "");
    }

    // Could scale the size of the item here as well as position
    box.css("top", y + "px").css("left", x + "px");
}

function convertToRadians(degrees) {
    return degrees * (3.14159265 / 180);
}​

它有点粗糙和准备好了，所以显然你想根据你的需要定制它。实际上，它所做的是创建一个自定义的 jQuery 动画，每一步都会在中心 div 周围增加和重新定位小 div。如果它们是一半，它的 z 索引就会改变，从而产生深度的错觉。

如果你想让它看起来更真实一点，你总是可以根据它们与字体的接近程度来调整 div 的大小。

这有帮助吗？

如果您想要更多解释，请告诉我！:) 塔！