个回答

• qq_包包世界我专业_0

  2016-05-03 16:19:49

  已采纳

              /* 任务三、设置3D舞台布景 */
              perspective: 200px;
       
              /*任务四、设置3D舞台布景过渡效果*/
              transition: all 0.7s linear;
        
              position: relative;
          }
  
              .three-d:not(.active):hover {
                  cursor: pointer;
              }
  
                  /*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/
                  .three-d:not(.active):hover .three-d-box,
                  .three-d:not(.active):focus .three-d-box {
                      transform: translateZ(-25px) rotateX(90deg);
                  }
  
          .three-d-box {
              /*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/
              transform: translateZ(-25px);
              transition: all .3s ease-out;
              transform-style: preserve-3d;
              pointer-events: none;
              position: absolute;
              top: 0;
              left: 0;
              display: block;
              width: 100%;
              height: 100%;
          }
  
          /*任务七、给导航设置3D前，与3D后变形效果*/
          .front {
              transform: rotateX(0deg) translateZ(25px);
       
          }
  
          .back {
              transform: rotateX(-90deg) translateZ(25px);
              color: #FFE7C4;
          }

  0