Javascript 重新排序html元素，而无需直观地删除它们

好的，首先要做的事。 我试图完成的是创建我自己的“半3d”圆形旋转木马。 那里有很多，还有一些非常不错的，比如伊卡鲁塞尔（这就是我想要的）

问题是我想做我自己的只是为了它的地狱，我认为这是一个很好的做法

到目前为止，我有这个

这段代码基本上完成了所有的删除。 以及可以在JSFIDLE中找到的旋转代码

正如你所看到的，垂钓在第一次加载时效果很好，但在旋转时会有些失败。 淡入度看起来也不错，但是当你点击末端的图像divs时，它一次淡入2

最糟糕的是。使用insertBefore和insertAfter时，整个旋转木马都会移动

我现在的脑筋急转弯是想知道如何通过纯动画使它们平滑地移动到堆栈的末尾或开头

你们有谁知道我该从哪里开始找吗？ 我浏览了伊卡鲁塞尔代码，这是一个疯狂的原始数学量，我还没有准备好解决

---

谢谢：）

您将遇到的问题是，这个问题基本上是原始数学。这是无法回避的问题。这个问题本质上是关于将3d图像投影到2d平面。所以你认为唯一的方法是仅基于css3旋转和平移元素？我希望避免这种情况。这是在2d中模拟3d效果的唯一方法。您正在尝试在二维平面上实现深度。显然不可能，但事实证明，你可以很容易地欺骗人眼。

uncaughttypeerror:objectnone没有方法“setFromString”

Hmm。这将是一场有趣的比赛！回到绘图板上我想：D.谢谢你，伙计！

     $this.Shift = function (items, end) {
        if (end == true) {
            $this.children().each(function () {
                // Rearrange all items
                $this.CalculateNewPos(this);
                $this.Rotate(this);
            });
        }
        else {
            $this.children().each(function () {
                // Rearrange all items
                $this.CalculateNewPos(this);
                $this.Rotate(this);
            });
        }
    }

    $this.ShiftRight = function(items, index)
    {
        $(items[index]).fadeOut('slow', function () {
            $(this).insertAfter($this.children().last());
            $this.Shift(items, false);
            $(this).fadeIn('slow');
        });
    }

    $this.ShiftLeft = function(items, index, currentItem)
    {
        $(items[currentItem - index]).fadeOut('slow', function () {
            $(this).insertBefore($this.children().first());
            $this.Shift(items, true);
            $(this).fadeIn('slow');
        });
    }