CSS Box 2.5D Pop Out Shadow effect

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/