A great pure CSS3 3D menu demonstration and production tutorial

I have been busy during this time. I haven't shared some beautiful HTML5 and CSS3 resources here for a long time. I started early today and saw a very good CSS3 3D menu. I think it is very eye-catching, share it with you and analyze the source code. Below is:

I thought it was a pair of mahjong, right. At first glance, I thought it was a special Mahjong effect written in CSS3. As a result, I was wrong. It just looked quite similar.

In addition, you can directly view the menu DEMO here.

Next, analyze the source code for implementing this 3D menu.

The Code mainly consists of HTML and CSS3. It should be said that it is relatively simple.

The first is the HTML code:

<ul>  <li>    <a class='list-item' href=''>      <i class='icon-reorder'></i>    </a>  </li>  <li>    <a class='list-item' href=''>      <i class='icon-th-large'></i>    </a>  </li>  <li>    <a class='list-item' href=''>      <i class='icon-bar-chart'></i>    </a>  </li>  <li>    <a class='list-item' href=''>      <i class='icon-tasks'></i>    </a>  </li>  <li>    <a class='list-item' href=''>      <i class='icon-bell'></i>    </a>  </li>  <li>    <a class='list-item' href=''>      <i class='icon-archive'></i>    </a>  </li>  <li>    <a class='list-item' href=''>      <i class='icon-comment'></i>    </a>  </li>  <li>    <a class='list-item' href=''>      <i class='icon-sitemap'></i>    </a>  </li>  <li>    <a class='list-item' href=''>      <i class='icon-thumbs-up'></i>    </a>  </li>  <li>    <a class='list-item' href=''>      <i class='icon-tumblr'></i>    </a>  </li></ul>

Here, the standard ul li list is used to construct the HTML framework of the menu, with a clear hierarchy.

Next we will focus on CSS code. How can we use CSS3 to implement the menu's side-lying and shadow effects, and always make them look 3D.

ul {  position: relative;  -webkit-transform: rotate(-35deg) skew(20deg, 5deg);  -moz-transform: rotate(-35deg) skew(20deg, 5deg);  -ms-transform: rotate(-35deg) skew(20deg, 5deg);  -o-transform: rotate(-35deg) skew(20deg, 5deg);  transform: rotate(-35deg) skew(20deg, 5deg);}

The above lines of code are very important. We can also see that the rotate () attribute of CSS3 is used to rotate the entire menu at a certain angle, and then skew () is used () tilt the menu to an angle so that the menu begins to feel 3D.

Next is the style of each menu item:

.list-item {  background: #000000;  color: #575757;  text-align: center;  height: 2.5em;  width: 4em;  vertical-align: middle;  line-height: 2.5em;  border-bottom: 1px solid #060606;  position: relative;  display: block;  text-decoration: none;  -webkit-box-shadow: -2em 1.5em 0 #e1e1e1;  -moz-box-shadow: -2em 1.5em 0 #e1e1e1;  box-shadow: -2em 1.5em 0 #e1e1e1;  -webkit-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;  -moz-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;  -o-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;  transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;}.list-item:hover {  background: #ff6e42;  color: #fffcfb;  top: -0.5em;  left: 0.5em;  -webkit-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;  -moz-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;  -o-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;  transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;  -webkit-box-shadow: -2em 2em 0 #e1e1e1;  -moz-box-shadow: -2em 2em 0 #e1e1e1;  box-shadow: -2em 2em 0 #e1e1e1;}.list-item:hover:before, .list-item:hover:after {  -webkit-transition: all 0.25s linear;  -moz-transition: all 0.25s linear;  -o-transition: all 0.25s linear;  transition: all 0.25s linear;}.list-item:hover:before {  background: #b65234;  width: 1em;  top: 0.5em;  left: -1em;}.list-item:hover:after {  background: #b65234;  width: 1em;  bottom: -2.5em;  left: 1em;  height: 4em;}.list-item:before, .list-item:after {  -webkit-transition: all 0.25s linear;  -moz-transition: all 0.25s linear;  -o-transition: all 0.25s linear;  transition: all 0.25s linear;}.list-item:after {  content: "";  position: absolute;  height: 4em;  background: #181818;  width: 0.5em;  bottom: -2.25em;  left: 1.5em;  -webkit-transform: rotate(90deg) skew(0deg, 45deg);  -moz-transform: rotate(90deg) skew(0deg, 45deg);  -ms-transform: rotate(90deg) skew(0deg, 45deg);  -o-transform: rotate(90deg) skew(0deg, 45deg);  transform: rotate(90deg) skew(0deg, 45deg);}.list-item:before {  content: "";  position: absolute;  height: 2.5em;  background: #121212;  width: 0.5em;  top: 0.215em;  left: -0.45em;  -webkit-transform: skewY(-45deg);  -moz-transform: skewY(-45deg);  -ms-transform: skewY(-45deg);  -o-transform: skewY(-45deg);  transform: skewY(-45deg);}

We can see that shadow is used to implement projection for each menu item. At this point, the 3D effect of the entire menu has been rendered.

In addition, the effect of sliding the menu item over the mouse and gradient the background color of the menu item using the animation feature of CSS3 to form a convex effect.

The entire implementation is like this. You can download the source code,>