لمحبى الاناقة والروعة : تاثير رائع جدا باستخدام ال CSS3 وjQuery

<div class="twrap">
    <div class="tbg"><span>P</span></div>
    <div class="tup">
        <div class="tfront"><span>P</span></div>
        <div class="tback"><span>P</span></div>
    </div>
    <div class="tdown"><span>P</span></div>
</div>

.letter-container h2 .twrap{
    position: relative;
    display: inline-block;
    width: 100px;
    height: 120px;
    line-height: 120px;
    font-size: 120px;
    border: 15px solid rgba(0,0,0,0.5);
    -webkit-perspective: 400;
    box-shadow: 1px 1px 4px #000;
}

.letter-container h2 .tbg{
    background: #121212;
    position: absolute;
    color: #f2c200;
    width: 100%;
    height: 100%;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
}

.letter-container h2 .tdown{
    height: 50%;
    top: 50%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    z-index: 1;
    background: #151515;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
    transition: all 0.3s linear;
}
.letter-container h2 .tdown span,
.letter-container h2 .tup .tback span{
    display: block;
    margin-top:-60px;
}

.letter-container h2 .tup{
    height: 50%;
    width: 100%;
    position: absolute;
    z-index: 10;
    -webkit-transform-origin: 50% 100%;
    transition: all 0.3s linear;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.9);
}
.letter-container h2 .tup .tfront,
.letter-container h2 .tup .tback{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    background: #151515;
}
.letter-container h2 .tup .tback{
    background: #121212;
    color: #f2c200;
}
.csstransforms3d .letter-container h2 .tup .tback{
    -webkit-transform: rotateX(-180deg);
}
.csstransforms3d .letter-container h2 a .twrap:hover .tup{
    -webkit-transform: rotateX(-180deg);
}

/* For browsers with no 3d transfrom support */
.no-csstransforms3d .letter-container h2 .tup .tback{
    display: none;
}
.no-csstransforms3d .letter-container h2 a .twrap:hover .tup{
    animation: moveBackUp 0.7s ease-in-out forwards;
}
.no-csstransforms3d .letter-container h2 a .twrap:hover .tdown{
    animation: moveBackDown 0.7s ease-in-out forwards;
}
@keyframes moveBackUp {
    0%{
        transform: translateY(0%);
    }
    50%{
        transform: translateY(-120%);
        z-index: -1;
    }
    100%{
        transform: translateY(0%);
        z-index: -1;
    }
}
@keyframes moveBackDown {
    0%{
        transform: translateY(0%);
    }
    50%{
        transform: translateY(120%);
        z-index: -1;
    }
    100%{
        transform: translateY(0%);
        z-index: -1;
    }
}