html css and js 设计相册3D旋转图片效果特效展示cid1161+获取源码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3d creative gallery</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="scene">
        <div class="back stage">
           
            <a href="#" class="character">
                <img src="1.jpg" alt="">
            </a>
            
             <a href="#" class="character">
                <img src="2.png" alt="">
            </a>
            
            <a href="#" class="character">
                <img src="3.png" alt="">
            </a>
            
             
            <a href="#" class="character">
                <img src="4.png" alt="">
            </a>
            
             <a href="#" class="character">
                <img src="5.png" alt="">
            </a>
            
             <a href="#" class="character">
                <img src="7.jpg" alt="">
            </a>
            
            
            
        </div>
    </div>
    
     <script src="main.js"></script>
    
</body>
</html>

css

body{
    background: #07131f;
}

 
.scene{
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}


.back.stage{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 45%;
    height: 60%;
    transition: all 0.5s;
}


.character{
    flex: 1 1 auto;
    margin: 1px;
    transition: filter 0.7s, transform 0.4s, all 0.7s;
    cursor: pointer;
}


.character > img{
    max-width: 100%;
    max-height: 100%;
    display: block;
    border: 2px solid white;
}

.back.stage.live{
    width: 40%;
}


.character.performing{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    z-index: 10000;
    transform: translate(-50%, -50%) rotate3d(1,1,0, 360deg);
}


.character.performing > img{
    max-width: 80vw;
    max-height: 80vh;
}

.character.idle{
    filter: blur(4px);
    cursor: auto;
}

    
console.clear();
const backstage = document.querySelector('.back.stage');
let performer = null;

backstage.addEventListener('click', e => {
  const elm = e.target;
  const character = elm.closest('.character');
  if (!character) return;
  if (performer) {
    if (performer === character)
      sendBack(character);
  }
  else
    sendFront(character);
});


function sendBack(character) {
  for (const ch of Array.from(backstage.children)) {
    ch.classList.remove('performing');
    ch.classList.remove('idle');
  }
  performer = null;
  backstage.classList.remove('live');
}


function sendFront(character) {
  for (const ch of Array.from(backstage.children)) {
    if (ch === character) {
      const r = ch.getBoundingClientRect();
      const o = backstage.getBoundingClientRect();
      ch.dataset.top = `${(r.top - o.top)/o.height*100}%`;
      ch.dataset.left = `${(r.left - o.left)/o.width*100}%`;
      // inject `top` & `left`
      ch.style.top = ch.dataset.top;
      ch.style.left = ch.dataset.left;
      ch.offsetWidth; // force re-calc (apply inline styles above)
      ch.classList.add('performing'); // apply css class, then
      ch.setAttribute('style', ''); // immd. take out inline style
      // ** let `.performing` takes over `top` & `left`
    }
    else {
      ch.classList.add('idle');
    }
  }
  performer = character;
  backstage.classList.add('live');
}


setTimeout(() => {
  sendFront(backstage.children[5]);
}, 500);

在线演示

让链接同时具备两种打开方式