css实现三维立体旋转相册效果代码

代码语言:html

所属分类:画廊相册

代码描述:css实现三维立体旋转相册效果代码

代码标签: css 三维 立体 旋转 相册

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        .gallery {
          --s: 150px; /* the image size */
          
          display: grid;
          transform-style: preserve-3d;
          animation: r 15s linear infinite;
          position: relative;
        }
        @keyframes r {
          0% {transform: perspective(450px) rotateX(-100deg) rotate(0deg)}
          to {transform: perspective(450px) rotateX(-100deg) rotate(-360deg)}
        }
        .gallery > img {
          grid-area: 1/1;
          width: var(--s);
          aspect-ratio: 1;
          object-fit: cover;
          border-radius: 10px 10px 0 0;
          transform: rotate(var(--_a)) translateY(120%) rotateX(90deg);
        }
        .gallery > img:nth-child(1) {--_a: 0deg}
        .gallery > img:nth-child(2) {--_a: 60deg}
        .gallery > img:nth-child(3) {--_a: 120deg}
        .gallery > img:nth-child(4) {--_a: 180deg}
        .gallery > img:nth-child(5) {--_a: 240deg}
        .gallery > img:nth-child(6) {--_a: 300deg}
        
        .gallery::before {
          content: "";
          position: absolute;
          inset: -100%;
          clip-path: polygon(50% 0,calc(50% + .866*50%) 25%,calc(50% + .866*50%) 75%,50% 100%,calc(50% - .866*50%) 75%,calc(50% - .866*50%) 25%);
          background: #99B2B7;
          transform: translateZ(calc(var(--s)/2)) rotate(90deg);
        }
        
        
   .........完整代码请登录后点击上方下载按钮下载查看

网友评论0