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

作者code

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>3d creative gallery</title>
  6. <link rel="stylesheet" href="style.css">
  7. </head>
  8. <body>
  10. <div class="scene">
  11. <div class="back stage">
  13. <a href="#" class="character">
  14. <img src="1.jpg" alt="">
  15. </a>
  17. <a href="#" class="character">
  18. <img src="2.png" alt="">
  19. </a>
  21. <a href="#" class="character">
  22. <img src="3.png" alt="">
  23. </a>
  26. <a href="#" class="character">
  27. <img src="4.png" alt="">
  28. </a>
  30. <a href="#" class="character">
  31. <img src="5.png" alt="">
  32. </a>
  34. <a href="#" class="character">
  35. <img src="7.jpg" alt="">
  36. </a>
  40. </div>
  41. </div>
  43. <script src="main.js"></script>
  45. </body>
  46. </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

  1. body{
  2. background: #07131f;
  3. }
  6. .scene{
  7. width: 100vw;
  8. height: 100vh;
  9. position: relative;
  10. overflow: hidden;
  11. }
  14. .back.stage{
  15. position: absolute;
  16. top: 50%;
  17. left: 50%;
  18. transform: translate(-50%, -50%);
  19. display: flex;
  20. flex-flow: row nowrap;
  21. align-items: center;
  22. width: 45%;
  23. height: 60%;
  24. transition: all 0.5s;
  25. }
  28. .character{
  29. flex: 1 1 auto;
  30. margin: 1px;
  31. transition: filter 0.7s, transform 0.4s, all 0.7s;
  32. cursor: pointer;
  33. }
  36. .character > img{
  37. max-width: 100%;
  38. max-height: 100%;
  39. display: block;
  40. border: 2px solid white;
  41. }
  43. .back.stage.live{
  44. width: 40%;
  45. }
  48. .character.performing{
  49. position: absolute;
  50. top: 50%;
  51. left: 50%;
  52. margin: 0;
  53. z-index: 10000;
  54. transform: translate(-50%, -50%) rotate3d(1,1,0, 360deg);
  55. }
  58. .character.performing > img{
  59. max-width: 80vw;
  60. max-height: 80vh;
  61. }
  63. .character.idle{
  64. filter: blur(4px);
  65. cursor: auto;
  66. }
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;
}

js

  1. console.clear();
  2. const backstage = document.querySelector('.back.stage');
  3. let performer = null;
  5. backstage.addEventListener('click', e => {
  6. const elm = e.target;
  7. const character = elm.closest('.character');
  8. if (!character) return;
  9. if (performer) {
  10. if (performer === character)
  11. sendBack(character);
  12. }
  13. else
  14. sendFront(character);
  15. });
  18. function sendBack(character) {
  19. for (const ch of Array.from(backstage.children)) {
  20. ch.classList.remove('performing');
  21. ch.classList.remove('idle');
  22. }
  23. performer = null;
  24. backstage.classList.remove('live');
  25. }
  28. function sendFront(character) {
  29. for (const ch of Array.from(backstage.children)) {
  30. if (ch === character) {
  31. const r = ch.getBoundingClientRect();
  32. const o = backstage.getBoundingClientRect();
  33. ch.dataset.top = `${(r.top - o.top)/o.height*100}%`;
  34. ch.dataset.left = `${(r.left - o.left)/o.width*100}%`;
  35. // inject `top` & `left`
  36. ch.style.top = ch.dataset.top;
  37. ch.style.left = ch.dataset.left;
  38. ch.offsetWidth; // force re-calc (apply inline styles above)
  39. ch.classList.add('performing'); // apply css class, then
  40. ch.setAttribute('style', ''); // immd. take out inline style
  41. // ** let `.performing` takes over `top` & `left`
  42. }
  43. else {
  44. ch.classList.add('idle');
  45. }
  46. }
  47. performer = character;
  48. backstage.classList.add('live');
  49. }
  52. setTimeout(() => {
  53. sendFront(backstage.children[5]);
  54. }, 500);
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);

在线演示

让链接同时具备两种打开方式
获取源码: hemas
下载数:133人次, 文件大小: 1.9 KB, 上传日期: 2021年-6 月-23日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

3,712 人查阅

类似文章