/* basic menu styles */
        .block-menu {
            display: block;
            background: transparant;
                  float: center;

        }

        .block-menu li {
            display: inline-block;
                  float: right;
        }

        .block-menu li a {
            color: #ff0000;
            display: block;
            text-decoration: none;
            font-family: "Droid Arabic kufi"',Arial,sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            font-smoothing: antialiased;
            text-transform: uppercase;
            overflow: visible;
            line-height: 20px;
            font-size: 24px;
            padding: 15px 10px;
                     text-align: center;
        }

        /* animation domination */
        .three-d {
            -webkit-perspective: 200px;
            -moz-perspective: 200px;
            perspective: 200px;
            -webkit-transition: all .07s linear;
            -moz-transition: all .07s linear;
            transition: all .07s linear;
            position: relative;
        }

            .three-d:not(.active):hover {
                cursor: pointer;
            }

            .three-d:not(.active):hover .three-d-box, 
            .three-d:not(.active):focus .three-d-box {
                -moz-transform: translateZ(-25px) rotateX(90deg);
                -webkit-transform: translateZ(-25px) rotateX(90deg);
                -o-transform: translateZ(-25px) rotateX(90deg);
                transform: translateZ(-25px) rotateX(90deg);
            }

        .three-d-box {
            -webkit-transition: all .3s ease-out;
            -moz-transition: all .3s ease-out;
            -ms-transition: all .3s ease-out;
            -o-transition: all .3s ease-out;
            transition: all .3s ease-out;
            -webkit-transform: translatez(-25px);
            -moz-transform: translatez(-25px);
            -o-transform: translatez(-25px);
            transform: translatez(-25px);
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            pointer-events: none;
            position: absolute;
            top: 0;
            right: 0;
            display: block;
            width: 100%;
            height: 100%;
        }

        .front {
            -webkit-transform: rotatex(0deg) translatez(25px);
            -moz-transform: rotatex(0deg) translatez(25px);
            -o-transform: rotatex(0deg) translatez(25px);
            transform: rotatex(0deg) translatez(25px);
        }

        .back {
            -webkit-transform: rotatex(-90deg) translatez(25px);
            -moz-transform: rotatex(-90deg) translatez(25px);
            -o-transform: rotatex(-90deg) translatez(25px);
            transform: rotatex(-90deg) translatez(25px);
            color: #FFE7C4;
        }

        .front, .back {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            background: #418BD4;
            padding: 15px 10px;
            color: white;
            pointer-events: none;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

    <ul class="block-menu">
        <li><a href="http://bassel.do.am/" class="three-d">
            الرئيسية
            <span class="three-d-box"><span class="front">الرئيسية</span><span class="back">الرئيسية</span></span>
        </a></li>

        <li><a href="http://bassel.do.am/blog" class="three-d">
            المدونة
            <span class="three-d-box"><span class="front">المدونة</span><span class="back">المدونة</span></span>
        </a></li>

        <li><a href="http://bassel.do.am/index/contact/0-3" class="three-d">
            اتصل بنا
            <span class="three-d-box"><span class="front">اتصل بنا</span><span class="back">اتصل بنا</span></span>
        </a></li>

<li><a href="#" class="three-d">
            About
            <span class="three-d-box"><span class="front">صفحة</span><span class="back">صفحة</span></span>
        </a></li>
    </ul>
</div>