jquery+css实现三维图层堆叠点击切换动画效果代码-html代码-BFW代码库

jquery+css实现三维图层堆叠点击切换动画效果代码

代码语言：html

所属分类：其他

代码描述：jquery+css实现三维图层堆叠点击切换动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body {
      margin: 0;
      background: #b4e0e1;
    }
    
    .layer-container {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -100px 0 0 -100px;
      perspective: 1350px;
      transform-style: preserve-3d;
    }
    
    .layer {
      width: 200px;
      height: 200px;
      position: absolute;
      transition: all 1.5s ease-in-out;
      cursor: pointer;
      z-index: 1;
    }
    
    
    /* dark blue layer */
    
    .dark-blue-layer {
      background: #234688;
    }
    
    
    /* light blue layer */
    
    .light-blue-layer {
      background: #2abfd5;
    }
    
    .white-layer {
      background: #fff;
    }
    
    .bottom-layer {
      transform: rotateX(20deg) rotateZ(45deg) translateZ(0);
    }
    
    .mid-layer {
      transform: rotateX(42deg) rotateZ(45deg) translateZ(100px);
    }
    
    .top-layer {
      transform: rotateX(45deg) rotateZ(45deg) translateZ(200px);
    }
    
    @k.........完整代码请登录后点击上方下载按钮下载查看