/* 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>
الرئيسية 
