CSS方框2.5D弹出阴影效果

Question

因此，我试图创建一个div元素，在悬停时，将“弹出”，并显示为一个2.5D框。基本上，这个人想要的是：

3D Box Shadow effect

除了与一个过渡动画，所以当不徘徊，这是一个简单的2D框，当盘旋，它似乎是第二个形象在那个人的问题。

以下是我到目前为止所掌握的一些东西：

http://jsfiddle.net/78m3nzv6/

<div class="cat-box bot-row">
    <h4>Hello World!</h4>
    <p>Info</p>
</div>

。

.bot-row:hover {
    transition: all 0.3s ease-in-out;
    transform: translate(10px,10px);
}

.cat-box {
    background-color: grey;
    outline: #DDD8D4 solid 3px;
    padding: 3px 5px 5px 5px;
    margin: 10px 30px 10px 30px;
    transition: all 0.3s ease-in-out;
}

Answer 1

实际上，通过使用多个框影声明，您可以使用与您链接的答案非常相似的方式来实现这一点。

我还冒昧地将您的outline转换为border，并设置了box-sizing: border-box，这样边框就不会脱离效果。

下面是一个实况演示：

​

.bot-row:hover {
    transition: all 0.3s ease-in-out;
    transform: translate(10px, 10px);
    box-shadow: -1px -1px 0px #999, -2px -2px 0px #999, -3px -3px 0px #999, -4px -4px 0px #999, -5px -5px 0px #999, -6px -6px 0px #999, -7px -7px 0px #999, -8px -8px 0px #999, -9px -9px 0px #999, -10px -10px 0px #999, -11px -11px 0px #999, -12px -12px 0px #999;
}
.cat-box {
    box-sizing: border-box;
    background-color: grey;
    border: #DDD8D4 solid 3px;
    padding: 3px 5px 5px 5px;
    margin: 10px 30px 10px 30px;
    transition: all 0.3s ease-in-out;
}

<div class="cat-box bot-row">
     <h4>Hello World!</h4>

    <p>Info</p>
</div>

​

JSFiddle版本：http://jsfiddle.net/78m3nzv6/3/