CSS3 3D立方体翻转菜单实现教程

时间 2019-11-21

标签 css3 css 3d 立方体翻转菜单实现教程栏目 CSS 繁體版

原文原文链接

今天咱们来看一个很是有创意的CSS3 3D菜单，这个菜单的菜单项是能够旋转的长方体，鼠标滑过是长方体便可旋转，看看下面的效果图，是否是感受很是酷，我以为这个菜单很适合用在我们开发人员的我的网站上。css

固然你也能够直接到这里去查看这款菜单的DEMO演示。html

接下来仍是分析一下这款CSS3菜单的源代码吧，很简单的HTML+CSS便可实现。html5

先来看看HTML代码：css3

<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>

这个HTML布局可谓是干净利落，很难看出来这会是一款超酷的3D菜单。web

固然最重要的是CSS代码，一块儿来看看：布局

先是定义了一下菜单的总体外观，包括文字的颜色和菜单的背景等等：动画

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;
}

而后就是鼠标滑过菜单项实现的立方体翻转效果了：网站

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;
}

不难看出，咱们经过CSS3的transform的rotate属性就能完成翻转的动做，同时结合transition属性来实现翻转过程当中颜色的渐变更画。spa

最后咱们把源代码分享上来，下载地址>>3d