.ensemble {
    /*background: #222;*/
    background: #000101;
    z-index: 1;
    
}

.ligne1 {
    z-index: 1;
    display: flex;
    position: relative;
    transform: rotate(-25deg) skew(25deg);
    left: -110px;
    top: -1200px;
}

ul {
    position: relative;
    left: 0;
    display: flex;
    transform-style: preserve-3d;
    /*transform: rotate(-25deg) skew(25deg);*/
}
ul li {
    position: relative;
    list-style: none;
    width: 60px;
    height: 60px;
    margin: 14px 10px;
}

ul li:before {
   content: '';
   position: absolute;
   bottom: -10px;
   left: 0;
   width: 100%;
   height: 10px;
   background: #2a2a2a;
   transform-origin: top;
   transform: skewX(-41deg);
}

ul li:after {
   content: '';
   position: absolute;
   top: 0;
   left: -9px;
   width: 9px;
   height: 100%;
   background: #2a2a2a;
   transform-origin: right;
   transform: skewY(-49deg);
}

ul li span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    background: #333;
    color: rgba(255,255,255,0.2);
    font-size: 30px !important;
    transition: 0.2s;
}
ul li:hover span
{
    z-index: 1000;
    transition: 0.5s;
    color: #fff;
    box-shadow: -1px 1px 1px rgba(0,0,0,0.05);
    /*scale: 3;*/

}

ul li:hover span:nth-child(5)
{
    transform: translate(40px,-40px);
    opacity: 1;

}
ul li:hover span:nth-child(4)
{
    transform: translate(30px,-30px);
    opacity: 0.8;

}
ul li:hover span:nth-child(3)
{
    transform: translate(20px,-20px);
    opacity: 0.6;

}
ul li:hover span:nth-child(2)
{
    transform: translate(10px,-10px);
    opacity: 0.4;

}
ul li:hover span:nth-child(1)
{
    transform: translate(0px,0px);
    opacity: 0.2;
}

ul li:nth-child(1):hover span
{
    background: #3b5999;
}

ul li:nth-child(2):hover span
{
    background: #55acee;
}

ul li:nth-child(3):hover span
{
    background: #25D366;
}

ul li:nth-child(4):hover span
{
    background: #0077b5;
}

ul li:nth-child(5):hover span
{
    background: #e4405f;
}
ul li:nth-child(6):hover span
{
    background: #3b5999;
}

ul li:nth-child(7):hover span
{
    background: #55acee;
}

ul li:nth-child(8):hover span
{
    background: #25D366;
}

ul li:nth-child(9):hover span
{
    background: #0077b5;
}

ul li:nth-child(10):hover span
{
    background: #e4405f;
}
ul li:nth-child(11):hover span
{
    background: #3b5999;
}

ul li:nth-child(12):hover span
{
    background: #55acee;
}

ul li:nth-child(13):hover span
{
    background: #25D366;
}

ul li:nth-child(14):hover span
{
    background: #0077b5;
}

ul li:nth-child(15):hover span
{
    background: #e4405f;
}
ul li:nth-child(16):hover span
{
    background: #3b5999;
}

ul li:nth-child(17):hover span
{
    background: #55acee;
}

ul li:nth-child(18):hover span
{
    background: #25D366;
}

ul li:nth-child(19):hover span
{
    background: #0077b5;
}

ul li:nth-child(20):hover span
{
    background: #e4405f;
}
ul li:nth-child(21):hover span
{
    background: #3b5999;
}

ul li:nth-child(22):hover span
{
    background: #55acee;
}

ul li:nth-child(23):hover span
{
    background: #25D366;
}

ul li:nth-child(24):hover span
{
    background: #0077b5;
}

ul li:nth-child(25):hover span
{
    background: #e4405f;
}
ul li:nth-child(26):hover span
{
    background: #3b5999;
}

ul li:nth-child(27):hover span
{
    background: #55acee;
}

ul li:nth-child(28):hover span
{
    background: #25D366;
}

ul li:nth-child(29):hover span
{
    background: #0077b5;
}

ul li:nth-child(30):hover span
{
    background: #e4405f;
}