CSS 3D Effect 3D - Diagonal Angles

Question

Purpose:

I am creating a 3D hover graphic menu for a friend's website. There are a number of rectangles. When someone freezes, it will move up and to the left, leaving a darker version of itself to seem like it is sliding out. (The red circles in the screenshots are just to show the problem area.)

---

What I got:

I use an unordered list with structure <li><a><span>. Currently, I am sure that he is moving correctly on hover, leaving a shadow behind him.

the code:

(JSFiddle below)

HTML:

<section>
    <li class="tall" id="logos"><a class="dark" href=""><span>Logos</span></a></li>
    <li class="wide" id="illustrations"><a class="dark" href=""><span>Illustrations</span></a></li>
    <li class="wide" id="drawings"><a href=""><span>Drawings</span></a></li>
    <li class="small" id="web"><a href=""><span>Web</span></a></li>
    <li class="small narrow"  id="print"><a href=""><span>Print</span></a></li>
    <li class="small" id="other"><a class="dark" href=""><span>Other</span></a></li>
</section>

CSS

section { //Wrap
    height:200px;
    width:600px;
}
li {
    list-style:none;
    display:block;
    float:left;
    height:47%;
    margin-bottom:2%;
}

a {
    outline:0;
    height:100%;
    width:100%;
    display:block;
    color:black;
    text-decoration:none;
    position:relative;
    top:0;
    left:0;
    box-shadow:0px 0px 0px 0px rgb(0,0,0);
    transition: all 100ms ease-in;
    background-color:inherit;
}
a:hover, a:focus {
    top:-4px;
    left:-4px;
    box-shadow:4px 4px 0px 0px rgba(0,0,0,0.2);
}
span {
    display:block;
    position:absolute;
    top:50%;
    margin-top:-15px;
    width:100%;
    text-align:center;
    font-family:Calibri;
    font-size:22px;
    font-weight:100;
}
//Sizes
.tall {
    height:100%;
    width:32%;
}
.wide {
    width:32%;
    margin-left:2%;
}
.small {
    margin-left:2%;
    width:21%;
}
.small.narrow {
    width:20%;
}
.dark {
    color:white;
}
//Colors
#logos {
    background-color:rgb(242,25,44); 
}
#illustrations {
    background-color:rgb(41,90,95);
}
#drawings {
    background-color:rgb(139,181,143);
}
#web {
    background-color:rgb(187,222,189);
}
#print {
    background-color:rgb(239,243,210);
}
#other {
    background-color:rgb(242,25,44);
}

Screenshot:

Violins:

http://jsfiddle.net/LhkEp/9/

---

What I need:

, . , . ? !

---

EDIT:

, , , . , , . , , , . , . ( , , .)

2:

web-tiki, : http://jsfiddle.net/LhkEp/23/ , , , , , . , , , .

Answer 1

( , : CSS ?) , .

, , . :

DEMO

CSS, :

a:before, a:after{
    content:'';
    position:absolute;
    transition: right 100ms ease-in, bottom 100ms ease-in;
}
a:after{
    top:0; right:0;
    border-bottom:2px solid red;
    border-left:2px solid red;
    border-right:2px solid transparent;
    border-top:2px solid transparent;
}
a:hover:after{
    right:-3px;
}
a:before{
    bottom:0; left:0;
    border-top:2px solid red;
    border-right:2px solid red;
    border-left:2px solid transparent;
    border-bottom:2px solid transparent;
}
a:hover:before{
    bottom:-4px;
}

Answer 2

CSS-... , mitred .

:hover et voila!

-

- ( , )

div {
    height:50px;
    width:50px;
    position:relative;
    background:pink;
    top:0;
    left:0;
    transition:all 100ms ease-in;    
}
div:hover{
    top:-4px;
    left:-4px;
}
div:hover:before, div:hover:after{
    opacity:1;
}
div:before, div:after {
    content:'';
    display:inline-block;
    position:absolute;
    opacity:0;
    transition:opacity 100ms ease-in;
}
div:after {
    height:100%;
    right:-4px;
    border-top:4px solid white;
    border-left:4px solid red;
}
div:before {
    width:100%;
    height:4px;
    top:100%;
    border-left:4px solid white;
    border-top:4px solid red;
}

Answer 3

, , , , , , :

a:hover, a:focus {
    top:-4px;
    left:-4px;
    box-shadow:1px 1px 0px 0px rgba(0,0,0,0.2),//Change here
        2px 2px 0px 0px rgba(0,0,0,0.2),//Change here
        3px 3px 0px 0px rgba(0,0,0,0.2),//Change here
        4px 4px 0px 0px rgba(0,0,0,0.2);//Change here
}

"" , , opacity 0.2, .

Answer 4

This can be achieved using border-radiusfor a:hoverand li:hover:

border-radius:0 5px 0 5px;

http://jsfiddle.net/LhkEp/13/