hello Readers , here is a simple blog on animated flipping menus using css3. I have created simple animated menus by using transition and rotate property of css3. In this I have created an unordered list of menus , on mouse hover on a particular menu it will flip and rotate due to CSS property transform and rotate.
Below is the HTML code for the same:
<!doctype html>
<head>
<link type="text/stylesheet" href="style.css" rel="stylesheet" >
</head>
<body>
<ul class="block-menu">
<li>
<a href="/" class="three-d">
Home
<span aria-hidden="true" class="three-d-box">
<span class="front">Home</span>
<span class="back">Home</span>
</span>
</a>
</li>
<li>
<a href="/demos" class="three-d">
About
<span aria-hidden="true" class="three-d-box">
<span class="front">About</span>
<span class="back">About</span>
</span>
</a>
</li>
<li>
<a href="/demos" class="three-d">
Team
<span aria-hidden="true" class="three-d-box">
<span class="front">Team</span>
<span class="back">Team</span>
</span>
</a>
</li>
</ul>
</body>
</html>
Now we will write the CSS code to perform the above task. Copy the below code in your CSS file .
.block-menu {
display: block;
background: #fff;
}
.block-menu li {
display: inline-block;
}
.block-menu li a {
display: block;
text-decoration: none;
font-family: 'Passion One', Arial, sans-serif;
font-smoothing: antialiased;
text-transform: uppercase;
overflow: visible;
line-height: 20px;
font-size: 22px;
padding: 15px 10px;
}
/* animation domination */
.three-d {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
/* complete the animation! */
.three-d:hover .three-d-box,
.three-d:focus .three-d-box {
transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
/*
put the "front" and "back" elements into place with CSS transforms,
specifically translation and translatez
*/
.front {
transform: rotatex(0deg) translatez(25px);
}
.back {
transform: rotatex(-90deg) translatez(25px);
color: #ffe7c4;
}
.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: black;
}
In the above code, I have used simple fonts Arial and sans-serif and transform property of CSS3 , on mouse hover menu text will rotate on -0 degree and -90 degree on x-axis.
Note- The following example will run on the latest version browsers such as on Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+, and IE 10 .
0 Comment(s)