2回答

• 

  qq_修修_04088898

  2016-10-12 15:17:17

  thankyou
  0 0
• 

  努力赚钱

  2016-10-11 14:26:06

  @import url("http://www.w3cplus.com/demo/css3/base.css");
  
  @font-face {
      font-family: 'sansationregular';
      src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot');
      src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot?#iefix') format('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/embedded-opentype'),
           url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.woff') format('woff'),
           url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.ttf') format('truetype'),
           url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.svg#sansationregular') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  body {
      background-color:#edecec;
  }
  
  /* basic menu styles */
  .nav-menu {
    display: block;
      background: #74adaa;
      width:950px;
      margin: 50px auto 150px;
  }
  .nav-menu > li {
    display: inline;
    float:left;            
      border-right:1px solid #94c0be;
  }
  .nav-menu > li:last-child {
    border-right: none;
  }
  .nav-menu li a {
    color: #fff;
      display: block;
      text-decoration: none;
      font-family: 'sansationregular';
      -webkit-font-smoothing: antialiased;
      -moz-font-smoothing: antialiased;
      font-smoothing: antialiased;
      text-transform: capitalize;
      overflow: visible;
      line-height: 20px;
      font-size: 20px;
      padding: 15px 30px 15px 31px;            
  }
  
  /* animation domination */
  .three-d {
    -webkit-perspective: 200px;
    -moz-perspective: 200px;
    -ms-perspective: 200px;
    -o-perspective: 200px;
    perspective: 200px;
    -webkit-transition: all .07s linear;
    -moz-transition: all .07s linear;
    -ms-transition: all .07s linear;
    -o-transition: all .07s linear;
    transition: all .07s linear;
    position: relative;
  }
  
  .three-d:not(.active):hover {
    cursor: pointer;
  }
  
  .three-d:not(.active):hover .three-d-box,
  .three-d:not(.active):focus .three-d-box {
    -wekbit-transform: translateZ(-25px) rotateX(90deg);
    -moz-transform: translateZ(-25px) rotateX(90deg);
    -o-transform: translateZ(-25px) rotateX(90deg);
    -ms-transform: translateZ(-25px) rotateX(90deg);
    transform: translateZ(-25px) rotateX(90deg);
  }
  
  .three-d-box {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -webkit-transform: translatez(-25px);
    -moz-transform: translatez(-25px);
    -ms-transform: translatez(-25px);
    -o-transform: translatez(-25px);
    transform: translatez(-25px);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -ms-pointer-events: none;
    -o-pointer-events: none;
    pointer-events: none;
    position: absolute;
    top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
  }
  
  .front {
    -webkit-transform: rotatex(0deg) translatez(25px);
    -moz-transform: rotatex(0deg) translatez(25px);
    -ms-transform: rotatex(0deg) translatez(25px);
    -o-transform: rotatex(0deg) translatez(25px);
    transform: rotatex(0deg) translatez(25px);
  }
  
  .back {
    -webkit-transform: rotatex(-90deg) translatez(25px);
    -moz-transform: rotatex(-90deg) translatez(25px);
    -ms-transform: rotatex(-90deg) translatez(25px);
    -o-transform: rotatex(-90deg) translatez(25px);
    transform: rotatex(-90deg) translatez(25px);
    color: #FFE7C4;
  }
  
  .front, .back {
    display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: #74adaa;
      padding: 15px 30px 15px 31px;    
      color: white;
      -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -ms-pointer-events: none;
    -o-pointer-events: none;
    pointer-events: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .nav-menu li .active .front,
  .nav-menu li .active .back,
  .nav-menu li a:hover .front,
  .nav-menu li a:hover .back {
    background-color: #51938f;
    -webkit-background-size: 5px 5px;
    background-size: 5px 5px;
    background-position: 0 0, 30px 30px;
    background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
    background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
      background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
    background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
    background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
  }
  .nav-menu ul {
    position: absolute;
      text-align: left;
      line-height: 40px;
      font-size: 14px;
      width: 200px;
      -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    -webkit-transform-origin: 0px 0px;
    -moz-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    -o-transform-origin: 0px 0px;
    transform-origin: 0px 0px;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
    -o-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
      backface-visibility: hidden;
  }
  .nav-menu > li:hover ul {
    display: block;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
      transform: rotateX(0deg);
  }

  你可以整体看一下
  

  0 0