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

Question

我正在尝试实现DIV鼠标悬停时的3D效果，目前的效果如下： http://jsfiddle.net/6TNBU/ 我想知道如何使左下角和右上角有更干净的阴影倾斜样式。我认为可能需要在这些角上加载一个三角形，但我想知道是否还有其他方法可以实现。感谢。

- Warface

---

你可以在动画顶层元素的同时克隆阴影元素，并根据需要定位这些克隆元素以创建3D效果。然而，这种方法似乎有些笨拙。 - j08691

Answer 1

如果您不介意使用伪元素，可以使用::before和::after（需要注意的是，据我所记得，IE不识别双冒号声明，因此您必须使用:before和:after）：

#box::before {
    content: ' ';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: 0;
    height: 100%;
    background-color: #f90;
    border-bottom: 10px solid white;
    border-right: 10px solid black;
}

#box::after {
    content: ' ';
    position: absolute;
    top: -10px;
    left: -10px;
    right: 0;
    width: 100%;
    border-bottom: 10px solid black;
    border-right: 10px solid white;
}

JS Fiddle demo.

- David Thomas

---

这正是我正在处理的问题。唯一的建议是添加一个包装器，以便在页面不在左上角时也可以使用效果：http://jsfiddle.net/jtbowden/6TNBU/3/ - Jeff B

有没有任何IE7和IE8兼容的方式来做这件事？ :D - Warface

算了，单个冒号在IE8上可以工作，但在IE7上不行...IE7见鬼去吧 :D - Warface

我们如何实现像这样的多个浮动框重叠在一起的效果？ - Warface

Answer 2

我认为尝试“块元素”方法会很有趣，即使用 div 创建 3D 外观，通过在背景和盒子之间分层 div，中间的偏移量为父级的上下左右各一像素，以创建深度外观。

请注意，我并不认为这是一个好方法，因为许多问题可能会影响性能。然而，我惊喜地发现，我可以通过以下代码获得相对良好的性能，并且是可以在 IE7/8/9、FF10 和 Chrome 17 中正常工作的。

所以，如果这对你有用，我很高兴听到这个消息，尽管我要补充说，这只是一个起点。我观察到了一些已知的问题，例如多个盒子会导致动画失效。但是它似乎可以在单个盒子中正常工作，我想通过一些努力，它可以被改进，甚至可以被移植成插件（如果有人愿意）。

如果您有任何问题，或者发现任何需要修复的地方，或者认为它很愚蠢/无意义/ 简直糟糕并且能够解释原因，请让我知道。

HTML

基本标记：

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

CSS

我添加了边框，因为我认为这样看起来更好：

.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;
}​

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++;
    });
});​

http://jsfiddle.net/zuppm/

- Jared Farrish

---

不错的方法来制作多个3D盒子 +1 - Warface