css实现三维3d翻转下拉菜单效果代码-html代码-BFW代码库

css实现三维3d翻转下拉菜单效果代码

代码语言：html

代码描述：css实现三维3d翻转下拉菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  


<style>
@charset "UTF-8";
:root {
  --z24: translateZ(24.5px);
  --z80: translateZ(80px);
  --ts: all .5s ease;
  --x90: rotateX(90deg);
  --xm90: rotateX(-90deg);
  --y90: rotateY(90deg);
  --ym90: rotateY(-90deg);
}

nav {
  width: 100%;
  padding: 16px 16px 0 16px;
  position: relative;
}

ol {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.main-menu {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  justify-content: center;
}

li {
  width: 160px;
  position: relative;
  cursor: pointer;
}
li span {
  width: 100%;
  height: 49px;
  display: block;
  position: relative;
  transition: var(--ts);
  transform-style: preserve-3d;
}
li span::before, li span::after {
  width: 100%;
  padding: 16px 0;
  display: block;
  position: absolute;
  border-radius: 8px;
  font: 400 14px "Consolas";
  text-align: center;
  text-transform: uppercase;
}

.main-item:nth-of-type(2),
.main-item:nth-of-type(4) {
  margin: 0 2px;
}

.main-item:nth-of-type(3)::before,
.main-item:nth-of-type(4)::before {
  width: 100%;
  top: 25px;
  display: block;
  position: absolute;
  color: #fff;
  font: 400 24px "Consolas";
  text-align: center;
  transition: var(--ts);
  z-index: 100;
  content: "▾";
}

.main-item:hover > span {
  transform: var(--x90);
}
.main-item > span::before {
  background: #000;
  color: #fff;
  transform: var(--z24);
  box-shadow: 0 8px 6px -6px #888;
}
.main-item > span::after {
  background: #ff9900;
  transform: var(--xm90) var(--z24);
}

.home::before, .home::after {
  content: "home";
}

.about::before, .about::after {
  content: "about";
}

.widgets::before, .widgets::after {
  content: "widgets";
}

.kabobs::before, .kabobs::after {
  content: "kabobs";
}

.contact::before, .contact::after {
  content: "contact";
}

.sub-menu {
  top: 51px;
  display: none;
  position: absolute;
}
.sub-menu li {
  opacity: 0;
  transform: translateY(-10px);
}
.sub-menu li:nth-of-type(2) {
  margin: 2px 0;
}

.sub-item:nth-of-type(1) {
  -webkit-animation: fade 0.5s ease 0.2s both;
          animation: fade 0.5s ease 0.2s both;
}

.sub-item:nth-of-type(2) {
  -webkit-animation: fade 0.5s ease 0.4s both;
          animation: fade 0.5s ease 0.4s both;
}

.sub-item:nth-of-type(3) {
  -webkit-animation: fade 0.5s ease 0.6s both;
          animation: fade 0.5s ease 0.6s both;
}

@-webkit-keyframes fade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.sub-item span::before {
  background: #008080;
  color: #fff;
  transform: var(--z80);
}
.sub-item span::after {
  background: #bc003b;
  color: #fff;
}

.ite.........完整代码请登录后点击上方下载按钮下载查看