CSS3 3D cube flip menu implementation tutorial

Today, let's look at a very creative CSS3 3D menu. The menu item of this menu is a box that can be rotated. If you move the mouse over it, you can rotate it. Let's see if the following is really cool, I think this menu is suitable for personal websites of our developers.

Of course, you can also go here to view the DEMO of this menu.

Next, let's analyze the source code of this CSS3 menu, which can be implemented simply using HTML + CSS.

Let's take a look at the HTML code:

<nav>  <ul>    <li><a class="current" href="#" data-hover="Home">Home</a></li>    <li><a href="#" data-hover="Blog">Blog</a></li>    <li><a href="#" data-hover="About">About</a></li>    <li><a href="#" data-hover="Contact">Contact</a></li>  </ul></nav>

This HTML layout is neat and neat. It is hard to see that this is a cool 3D menu.

Of course, the most important thing is the CSS code. Let's take a look:

First, the overall appearance of the menu is defined, including the color of the text and the background of the menu:

nav {  background: #fff;  margin: 15vh 2rem;}nav ul {  list-style: none;}nav ul li {  display: inline-block;  text-transform: uppercase;  font-size: 1.5rem;  letter-spacing: 0.05rem;}nav ul li a {  display: inline-block;  padding: 1rem;  color: #000;  text-decoration: none;  -webkit-transition: -webkit-transform 0.3s ease 0s;  transition: transform 0.3s ease 0s;  -webkit-transform-origin: 50% 0px 0px;  -ms-transform-origin: 50% 0px 0px;  transform-origin: 50% 0px 0px;  -webkit-transform-style: preserve-3d;  -ms-transform-style: preserve-3d;  transform-style: preserve-3d;}nav ul li a.current {  color: #FF005B;}

Then, the cube flip effect is achieved by moving the mouse over the menu item:

nav ul li a:hover {  background: #fff;  color: #000;  -webkit-transform: rotateX(90deg) translateY(-22px);  -ms-transform: rotateX(90deg) translateY(-22px);  transform: rotateX(90deg) translateY(-22px);}nav ul li a::before {  position: absolute;  top: 100%;  left: 0px;  width: 100%;  padding: 4px 0px;  text-align: center;  line-height: 50px;  background: none repeat scroll 0% 0% #FF005B;  color: #FFF;  content: attr(data-hover);  -webkit-transition: #6363CE 0.3s ease 0s;  transition: #6363CE 0.3s ease 0s;  -webkit-transform: rotateX(-90deg);  -ms-transform: rotateX(-90deg);  transform: rotateX(-90deg);  -webkit-transform-origin: 50% 0px 0px;  -ms-transform-origin: 50% 0px 0px;  transform-origin: 50% 0px 0px;}

It is not hard to see that we can use the rotate attribute of the transform in CSS3 to complete the flip action, and combine the transition attribute to implement the gradient animation of the color during the flip process.

Finally, we will share the source code,>