纯css实现三维悬空照片堆叠点击打开放大照片lightbox效果代码-html代码-BFW代码库

代码语言：html
代码描述：纯css实现三维悬空照片堆叠点击打开放大照片lightbox效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">



    <style>
        *,
        *::before,
        *::after {
          box-sizing: border-box;
          font-family: "Poppins", sans-serif;
          transform-style: preserve-3d;
        }
        
        body,
        html {
          -webkit-text-size-adjust: 100%;
          -webkit-tap-highlight-color: transparent;
          -webkit-font-smoothing: antialiased;
          text-rendering: optimizeLegibility;
        }
        
        body {
          background: dodgerblue;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100vh;
          overflow: hidden;
          margin: 0;
          perspective: 12in;
          perspective-origin: 50% 50%;
          animation: perspective 10s linear infinite;
          animation-delay: 1s;
        }
        
        @keyframes perspective {
          0% {
            perspective-origin: 50% 50%;
            perspective: 12in;
          }
          25% {
            perspective-origin: 20% 30%;
            perspective: 15in;
          }
          75% {
            perspective-origin: 80% 70%;
            perspective: 15in;
          }
          100% {
            perspective-origin: 50% 50%;
            perspective: 12in;
          }
        }
        
        .surface {
          position: relative;
          background: transparent;
          position: absolute;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 300%;
          height: 300%;
          left: -100%;
          transform: rotateX(90deg) translateZ(-2.5in) translateY(-1in);
        }
        
        .surface .background {
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background-color: #362000;
          background-image: url("//repo.bfw.wiki/bfwrepo/image/5e4350528640e.png");
          background-position: center;
          transform: translateZ(-1.02in) translateX(1in);
          filter: blur(0.01in);
        }
        
        .surface .background::after {
          position: absolute;
          width: 100%;
          height: 100%;
          content: "";
          background: radial-gradient(
            circle,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 1) 90%,
            rgba(0, 0, 0, 1) 100%
          );
          border-radius: 50%;
        }
        
        .surface .card {
          position: absolute;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 3.5in;
          height: 2in;
          background: url("//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png");
          background-position: center !important;
          background-size: contain !important;
          background-repeat: no-repeat !important;
          transform: translateX(0.5in) rotateX(-30deg) rotateY(-10deg) rotateZ(-60deg);
          outline: 0.01in solid transparent;
          outline-offset: 0in;
          transition: all 0.3s ease-in-out;
        }
        
        .surface .card p {
          color: white;
          background: rgba(0, 0, 0, 0.5);
          padding: 0.1in;
          font-size: 12pt;
          line-height: 22pt;
          font-weight: 500;
          margin: 0;
        }
        
        .surface .card svg {
          background: rgba(255, 255, 255, 0.7);
          width: 2in;
          height: auto;
          padding: 0.2in;
          border-radius: 0.5in;
        }
        
        .surface .card:nth-child(2) {
          background: url("//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png");
          transform: translateZ(1.4in) translateX(-2in) rotateX(-25deg) rotateY(40deg)
            rotateZ(-60deg);
        }
        
        .surface .card:nth-child(3) {
          background: url("//repo.bfw.wiki/bfwrepo/image/5e62ef82c83ea.png");
          transform: translateZ(3.1in) translateX(-0.25in) rotateX(-70deg) rotateY(0deg)
            rotateZ(-60deg);
        }
        
        .surface .card:nth-child(4) {
          background: url("//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png");
          transform: translateZ(4.5in) translateX(-0.8in) translateY(0.6in)
            rotateX(-80deg) rotateY(0deg) rotateZ(-20deg);
        }
        
        .surface .card:nth-child(5) {
          background: url("//repo.bfw.wiki/bfwrepo/image/5fb34b3c1322f.png");
          transform: translateZ(5.8in) translateX(1.4in) translateY(-0.7in)
            rotateX(-70deg) rotateY(0deg) rotateZ(15deg);
        }
        
        .surface .card:nth-child(6) {
          background: url("//repo.bfw.wiki/bfwrepo/image/5fb34b65ae8bb.png");
          transform: translateZ(2in) translateX(1.7in) translateY(-0.7in)
            rotateX(-60deg) rotateY(25deg);
        }
        
        .surface .card:nth-child(1)::after {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          content: "";
          background: black;
          transform: rotateZ(20deg) rotateY(27deg) rotateX(17deg) translateX(0.3in)
            translateY(0.5in) translateZ(-1in);
          filter: blur(0.5in);
          opacity: 0.8;
        }
        
        .surface .card:nth-child(2)::after {
          position: absolute;
          top: 0.4in;
          right: 0.4in;
          width: 30%;
          height: 50%;
          content: "";
          background: black;
          filter: blur(0.6in);
          opacity: 0.7;
        }
        
        .card div {
          position: absolute;
          background: #eee;
          transform-origin: 50% 50%;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
        }
        
        .card .back {
          width: 100%;
          height: 100%;
          backface-visibility: hidden;
          transform: translateZ(-0.035in) rotateX(180deg);
        }
        
        .card .bottom {
          width: 3.485in;
          height: 0.035in;
          transform: rotateX(-90deg) translateZ(1in) translateX(-0.01in);
        }
        
        .card .top {
          width: 3.485in;
          height: 0.035in;
          transform: rotateX(90deg) translateZ(0.97in) translateX(-0.01in);
        }
        
        .card .left {
          width: 1.97in;
          height: 0.035in;
          transform: rotateX(-90deg) rotateY(-90deg) translateZ(1.75in)
            translateX(0.02in);
        }
        
        .card .right {
          width: 1.97in;
          height: 0.035in;
          transform: rotateX(-90deg) rotateY(90deg) translateZ(1.75in)
            translateX(-0.02in);
        }
        
        .surface .card:hover {
          outline: 0.04in solid white;
          outline-offset: 0.2in;
          transition: all 0.3s ease-in-out;
        }
        
        .surface .card .menu {
          position: absolute;
          width: 100%;
          height: 100%;
          bottom: 0;
          left: 0;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-evenly;
          visibility: hidden;
          background: rgba(0, 0, 0, 0.8);
          opacity: 0;
          transition: all 0.3s ease-in-out;
        }
        
        .surface .card .menu label {
          padding: 0.2in 0.25in;
          background: dodgerblue;
          color: white;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-radius: 0.1in;
          text-decoration: none;
          font-size: 14pt;
          line-height: 28pt;
          box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
            rgba(0, 0, 0, 0.22) 0px 15px 12px;
          transition: all 0.3s ease-in-out;
        }
        
        label:hover {
          cursor: pointer;
        }
        
        .surface .card .menu label:hover {
          background: #888;
          border-radius: 0.3in;
          font-size: 16pt;
          transition: all 0.3s ease-in-out;
        }
        
        .surface .card:hover .menu {
          visibility: visible;
          opacity: 1;
          transition: all 0.3s ease-in-out;
        }
        
        body > input {
          display: none;
        }
        
        body > img {
          position: fixed;
          align-self: flex-end;
          margin-bottom: 0.4in;
          height: 70%;
          width: auto;
          visibility: hidden;
          opacity: 0;
          z-index: 2;
          box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
            rgba(0, 0, 0, 0.22) 0px 15px 12px;
          transition: all 0.3s ease-in-out;
        }
        
        .lightbox-backdrop {
          position: fixed;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.7);
          visibility: hidden;
          opacity: 0;
          z-index: 1;
          transition: all 0.3s ease-in-out;
        }
        
        #close-button {
          width: 0.6in;
          height: 0.6in;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: fixed;
          top: 15%;
          background: white;
          border-radius: 0.1in;
          box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
            rgba(0, 0, 0, 0.22) 0px 15px 12px;
          z-index: 2;
        }
        
        #close-button::after {
          position: absolute;
          width: 1.5in;
          height: auto;
          padding: 0.1in 0in;
          bottom: 110%;
          content: "TAP TO CLOSE";
          background: black;
          color: white;
          font-size: 12pt;
          line-height: 24pt;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-radius: 0.1in;
        }
        
        #close-button svg {
          width: 80%;
          height: auto;
          fill: black;
 .........完整代码请登录后点击上方下载按钮下载查看