Jquery 如何实现这种3d悬停效果？

我试着做一个3d鼠标悬停效果，当你在一个DIV上的时候。下面是它现在的样子

我想知道我怎样才能在排序，左下角和右上角将有一个干净的阴影，斜风格。我想也许可以在这些角上加载一个三角形，但我想知道是否有其他方法可以实现这一点

---

谢谢

如果您不介意使用伪元素的话，这里有

：before

和

：：after

（不过请注意，正如我所记得的，IE不识别双冒号声明，所以您必须使用

：before

和

：after

）：

---

.

我认为尝试“小方块”方法会很有趣，即使用

div

s通过在背景和长方体之间分层

div

s来创建3D外观，中间部分与父对象之间偏移一个像素，然后向左创建深度外观

注意，我并不是说这是一个很好的方法，因为许多问题可能会影响性能。然而，我惊喜地看到，我可以用下面的代码获得相对良好的性能，是的，它似乎在IE7/8/9以及FF10和Chrome 17中都能正常工作

所以，如果这对你有用的话，我很高兴听到这个消息，尽管我想赶紧补充一句，这实际上只是一个起点/起点。我观察到一些已知问题，例如多个框导致动画崩溃。但它似乎可以用一个单独的盒子工作，我想通过一些工作它可以工作得更好，甚至可以移植到一个插件（如果有人愿意的话）

如果您有任何问题，或者您看到任何可以/应该解决的问题，或者如果您认为这很愚蠢/毫无意义/并且可以解释原因，请告诉我

HTML

基本标记：

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>​

jQuery

$(function(){
    var $threed = $('<div class="threed">'),
        $shadow = $('<div class="shadow">'),
        offset = 0;

    var init = function($jq, distance, speed){
        $jq.each(function(){
            var $this = $(this),
                $threeds,
                $shadow_clone = $shadow.clone(),
                $threed_clone,
                borderlw = parseInt($this.css('border-left-width')),
                borderrw = parseInt($this.css('border-right-width')),
                bordertw = parseInt($this.css('border-top-width')),
                borderbw = parseInt($this.css('border-bottom-width')),
                width = parseInt($this.innerWidth()) + borderlw + borderrw,
                height = parseInt($this.innerHeight()) + bordertw + borderbw,
                dimensions = {height: height, width: width};

            $shadow_clone.css({
                height: height + distance, 
                width: width + distance}
            );

            $this.data('distance', distance).wrap($shadow_clone);

            for (var i = 0; i <= distance; i++) {
                var $threed_clone = $threed.clone();

                $this.before($threed_clone);
                $threed_clone.css(dimensions).data('dimensions', {
                    left: i, top: i
                });
            }

            $this.data('threeds', $this.siblings('.threed'));

            $this.mouseenter(function(){
                var offset = 0,
                    properties = {
                        left: distance, 
                        top: distance
                    },
                    options = {
                        duration: speed, 
                        step: goUp, 
                        complete: finishThreeD
                    };

                $(this).stop().animate(properties, options);
            })
            .mouseleave(function(){
                var properties = {
                        left: 0, 
                        top: 0
                    },
                    options = {
                        duration: speed, 
                        step: goDown, 
                        complete: finishTwoD
                    };

                $(this).stop().animate(properties, options);
            });
        });
    };

    var goUp = function(){
        var _offset = parseInt(this.style.left);

        if (_offset > offset) {
            offset = _offset;

            $($(this).data().threeds[offset - 1])
                .prevAll('.threed').each(function(){
                    $(this).css($(this).data().dimensions);
                });
        }
    };

    var finishThreeD = function() {
        $(this).data().threeds.each(function(){
            $(this).css($(this).data().dimensions);
        });
    };

    var goDown = function (){
        var _offset = parseInt(this.style.left);

        if (_offset < offset) {
            offset = _offset;

            $($(this).data().threeds[offset - 1])
                .nextAll('.threed').css({top: 0, left: 0});

            if (offset === 0) {
                $(this).data().threeds.css({top: 0, left: 0});
            }
        }
    };

    var finishTwoD = function (){
        $(this).data().threeds.css({top: 0, left: 0});

        offset = 0;
    };

    var inc = 1;

    $('.box').each(function(){
        init($(this), 10 * inc, 100 * (2.5 * inc));
        inc++;
    });
});​

$（函数（）{
变量$threed=$（''），
$shadow=$（''），
偏移量=0；
var init=函数（$jq、距离、速度）{
$jq.每个（函数（）{
变量$this=$（this），
三美元，
$shadow\u clone=$shadow.clone（），
$3D_克隆人，
borderlw=parseInt（$this.css（'border-left-width'）），
borderrw=parseInt（$this.css（'border-right-width'）），
bordertw=parseInt（$this.css（'border-top-width'）），
borderbw=parseInt（$this.css（'border-bottom-width'）），
width=parseInt（$this.innerWidth（））+borderlw+borderrw，
高度=parseInt（$this.innerHeight（））+bordertw+borderbw，
尺寸={高度：高度，宽度：宽度}；
$shadow_clone.css({
高度：高度+距离，
宽度：宽度+距离}
);
$this.data（'distance'，distance.）.wrap（$shadow\u clone）；
对于（变量i=0；i偏移量）{
偏移量=_偏移量；
$（$（this.data（）.threeds[offset-1]）
.prevAll（'.threed'）。每个（函数（）{
$（this.css（$（this.data（）.dimensions））；
});
}
};
var finishThreeD=函数（）{
$（this）.data（）.threed.each（function（））{
$（this.css（$（this.data（）.dimensions））；
});
};
var goDown=函数（）{
var _offset=parseInt（this.style.left）；
如果（_offset

---

在制作顶层动画时，您可以随时克隆阴影元素，根据需要定位克隆以创建3D效果。但这似乎有点老套。这正是我正在研究的。我唯一的建议是添加一个包装器，以便在阴影元素不在页面左上角时使用效果：任何IE7和IE8 compatib如何做到这一点？：DOh well nevermind with single:它适用于IE8，但不适用于IE7…让IE7见鬼去吧：我们如何才能实现像这些一样的多个盒子？彼此浮动一个做多个3d盒子的好方法+1

.shadow {
    position: relative;
    float: left;
}
.threed {
    background: black;
    position: absolute;
    top: 0;
    left: 0;
}
.box {
    width: 298px;
    height: 298px;
    background: #cacaca;
    position: relative;
    border: 1px solid #aaa;
    border-left: 1px solid #acacac;
    border-top: 1px solid #acacac;
}​

$(function(){
    var $threed = $('<div class="threed">'),
        $shadow = $('<div class="shadow">'),
        offset = 0;

    var init = function($jq, distance, speed){
        $jq.each(function(){
            var $this = $(this),
                $threeds,
                $shadow_clone = $shadow.clone(),
                $threed_clone,
                borderlw = parseInt($this.css('border-left-width')),
                borderrw = parseInt($this.css('border-right-width')),
                bordertw = parseInt($this.css('border-top-width')),
                borderbw = parseInt($this.css('border-bottom-width')),
                width = parseInt($this.innerWidth()) + borderlw + borderrw,
                height = parseInt($this.innerHeight()) + bordertw + borderbw,
                dimensions = {height: height, width: width};

            $shadow_clone.css({
                height: height + distance, 
                width: width + distance}
            );

            $this.data('distance', distance).wrap($shadow_clone);

            for (var i = 0; i <= distance; i++) {
                var $threed_clone = $threed.clone();

                $this.before($threed_clone);
                $threed_clone.css(dimensions).data('dimensions', {
                    left: i, top: i
                });
            }

            $this.data('threeds', $this.siblings('.threed'));

            $this.mouseenter(function(){
                var offset = 0,
                    properties = {
                        left: distance, 
                        top: distance
                    },
                    options = {
                        duration: speed, 
                        step: goUp, 
                        complete: finishThreeD
                    };

                $(this).stop().animate(properties, options);
            })
            .mouseleave(function(){
                var properties = {
                        left: 0, 
                        top: 0
                    },
                    options = {
                        duration: speed, 
                        step: goDown, 
                        complete: finishTwoD
                    };

                $(this).stop().animate(properties, options);
            });
        });
    };

    var goUp = function(){
        var _offset = parseInt(this.style.left);

        if (_offset > offset) {
            offset = _offset;

            $($(this).data().threeds[offset - 1])
                .prevAll('.threed').each(function(){
                    $(this).css($(this).data().dimensions);
                });
        }
    };

    var finishThreeD = function() {
        $(this).data().threeds.each(function(){
            $(this).css($(this).data().dimensions);
        });
    };

    var goDown = function (){
        var _offset = parseInt(this.style.left);

        if (_offset < offset) {
            offset = _offset;

            $($(this).data().threeds[offset - 1])
                .nextAll('.threed').css({top: 0, left: 0});

            if (offset === 0) {
                $(this).data().threeds.css({top: 0, left: 0});
            }
        }
    };

    var finishTwoD = function (){
        $(this).data().threeds.css({top: 0, left: 0});

        offset = 0;
    };

    var inc = 1;

    $('.box').each(function(){
        init($(this), 10 * inc, 100 * (2.5 * inc));
        inc++;
    });
});​