gsap实现三维立体相册拖拽旋转木马效果代码-html代码-BFW代码库

代码语言：html

代码描述：gsap实现三维立体相册拖拽旋转木马效果代码，图片可换，拖拽就会旋转，像风车一样。

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

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

<head>
  <meta charset="UTF-8">
  

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

  
  
<style>

body {
  line-height: 2;
  font-family: Untitled, sans-serif;
  text-transform: uppercase;
  color: #333;
  font-size: 14px;
}

.spacer {
  height: 20vh;
  z-index: 0;
  text-align: center;
}

.intro {
  display: grid;
  place-content: center;
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(-10%);
  }
  to {
    transform: translateY(10%);
  }
}
@keyframes bounce {
  from {
    transform: translateY(-10%);
  }
  to {
    transform: translateY(10%);
  }
}
.intro svg {
  width: 86px;
}
.intro span {
  display: inline-block;
  -webkit-animation: bounce 1s alternate infinite ease-in-out;
          animation: bounce 1s alternate infinite ease-in-out;
}

.container {
  overflow: hidden;
  width: 100%;
}

.wrapper {
  z-index: 1;
  perspective: 1800px;
  perspective-origin: center -300px;
  transform-style: preserve-3d;
  position: relative;
  min-height: 100vh;
  width: 100%;
  pointer-events: none;
  display: grid;
  place-content: center;
}

.spin-me {
  position: absolute;
  bottom: calc(20vh + 15px);
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  z-index: 0;
}

.rolo {
  position: absolute;
  height: 100vh;
  width: 100%;
  top: 10%;
  left: 50%;
  transform-style: preserve-3d;
  transform-origin: center left;
}

.item {
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 3/2;
  width: 450px;
  z-index: 1;
  pointer-events: all;
  background: #777;
  transform-style: preserve-3d;
}
.item.active-item {
  z-index: 2;
}
.active .item {
  pointer-events: none;
}
.item .card-text {
  z-index: 1;
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 20px;
  background: #fff;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translateZ(0px);
}
.item .card-text--back {
  transform: translateZ(-1px) rotatey(180deg);
  background: #fff;
}
.item img {
  height: 100%;
  width: 100%;
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
  z-index: 0;
}

.modal {
  cursor: zoom-out;
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: blur(0) grayscale(0);
          backdrop-filter: blur(0) grayscale(0);
  pointer-events: none;
  z-index: 3;
}
.modal.active {
  display: flex;
  opacity: 1;
  pointer-events: all;
  background-color: rgba(0, 0, 0, 0.69);
  -webkit-backdrop-filter: blur(5px) grayscale(100%);
          backdrop-filter: blur(5px) grayscale(100%);
  transition: background-color 0.2s ease-in, -webkit-backdrop-filter 0.2s ease;
  transition: background-color 0.2s ease-in, backdrop-filter 0.2s ease;
  transition: background-color 0.2s ease-in, backdrop-filter 0.2s ease, -webkit-backdrop-filter 0.2s ease;
}
.modal .modal-image {
  aspect-ratio: 16/9;
  width: 90%;
  max-width: 1260px;
  background: #eee;
  margin: 40px auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
}
.modal .modal-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
}
</style>


  
  
</head>

<body >
  <div class="container">
  <section class="spacer intro">
    <svg xmlns="http://www.w3.org/2000/svg" id="General" x="0" y="0" version="1.1" viewBox="0 0 86 30" aria-hidden="true" focusable="false">
      <path fill="currentColor" d="M14.4 17c-.5-1.1.1-2.1.7-3.2.5-.9 1-2.3 2-1.3 0 .5-.1.7-.3 1 .7.8.3 2.7-.2 3.4 0 1.5.2 2.8.4 4.1 1.5-1 2.8-2.6 3.8-4.3.7-1.1 1.3-2.4 3.2-2.4.4.4.4 1.2.7 1.7 1-.1 2.1-2.8 3.2-2.5.6.2.4 1.1.6 2 .5-.1.8-1 1.5-.9 1.1.1 1.2 2.4 1.6 3.5 3-1.7 4.6-5.4 6.6-8.4-.7-.7-5.3.4-5.5-.8-.1-1 1.2-.7 1.7-.7 1.4 0 2.9.1 4.1.2C39.6 5.7 40.2 2.3 44 2c.9 1.3 0 2.9-.7 3.8-.7 1.1-1.6 2-2.3 2.8 2.4 0 4.4 0 6.6-.5.6-.1 2.7-1.1 2.7.1 0 .7-1.7.9-2.8 1.1-1.7.3-4.3.6-6.5.5-1-.1-1.5 0-2 .7-.1 1.7-1.5 3.7-1.1 6.1.1.5.4 1.1.8 1.2 1.4.3 1.9-1.6 2.5-1.6.2 0 .6.3.7.5.2.9-2.8 3.5-4.2 2.3-1.1-.9-1.2-3-.8-5.1-1.6 1.9-3 4.8-5.9 5.8-.8-.8-.8-2.6-1.3-3.7-.9.3-.8 2.4-1.7 2.5-1.1.2-.8-1.5-.8-2.9-.8.4-2.9 3.2-3.6.8-.5.4-.9.9-1.7 1.1-1.4 1.8-2.5 3.8-4.6 4.9.5 2.8.2 6.7-2.1 7.1-1.8.3-4.3-1.6-4.1-3.6.3-2.2 3.2-3.2 4.8-4.2-.2-1.2-.4-2.6-.5-4-.4.9-3.1 1.7-4.2.6-.9.9-3 .7-3.2-.6-1.4.9-3.2 1.7-5.1 1-.2-.1-.9-.8-1.1-.8-.5 0-.8 1.1-1.5.8 0-.1-.1-.1-.2-.1-.6-.9.6-1.3.9-1.9-.4-1.1.8-3.7 1.7-3.6 1.3.1.5 3.1-.2 3.6 1.1 1.8 4.5.7 5.3-.7.5-4.6 1-9 2.6-12.6.6-1 1.7-3.7 3.4-3.4.7.2 1.3 1.6 1.2 2.8-.3 2.9-2.5 4.1-3.6 6.8-.7 1.7-.6 4-1.4 5.8-.1.3-.8 1.2-.8 1.5 0 .3.3.8.7.8.8 0 .3-.8.6-1.6.1-.5.9-1.5 1.4-1.4 1.1.2 0 2.6 1.3 2.9.6.1.8-.4 1.2-.6zM13.3 1.5c-1.8 1.7-2.7 4.8-3 7.8.7-2.8 3.9-4.1 3.3-7.7-.2 0-.2-.1-.3-.1zM40 7.9c1.2-1.4 2.7-2.4 3.1-4.6-1.9.8-2.6 3-3.1 4.6zM12.4 26.6c.2.9 1.4 1.9 2.5 1.8 1.5-.2 1.7-3.8 1.1-5.4-1.1.8-4 1.4-3.6 3.6z"></path>
      <path fill="currentColor" d="M73.2 10.7c.7-1.8 1.5-4.2 2.8-5.5 1.9-1.9 4.7-.9 4.4 2.5-.4 3.7-4.5 6.8-6.5 8.4 0 .4.3.5.5.7.8 0 1.2-.4 1.7-.7-.1-.6 0-1.1.3-1.5.6-.8 3.6-1.3 3.6-.1 0 1-2.4.9-2.6 2 .2.6.4 1.3.7 1.9 1.9-.7 3.9-1 5.5-2 .5-.3.9-1.1 1.7-.7 0 .2.1.2.2.3-1 2.7-4.5 2.7-7.1 3.8.1 1.9-1 2.6-2.5 2.8-1.3-1-.2-3.3 1.1-3.4-.1-.7-.4-1.1-.6-1.8-1 1.1-3.2.8-3.5-.7-.6.3-1.7.3-2.2-.1-.9.4-2.6 2.4-2.9.4-.4.2-.7.5-1.4.4-1.1.9-2.3 1.7-3.8 2.2.1 3.9.4 8.5-2.1 10.1-2.1-1-3.5-2.9-3.2-5.8.3-2.6 2.4-4.1 4-5.2-.1-.7-.1-1.5-.2-2.1-.2 0-.8.6-1.2.7-1.3-.1-3.5 1.3-4.1-.5-.5 1.5-3.5 2.9-4.2.6-.8.4-2.7.4-3.5 0-.9.3-1.3 1-2.2 1.2 0 .4.3.5.3.9-.2 1.8-3.4 2.1-3.5.3-.1-.9.5-1.4 1.3-1.7-.6-1.1-.8-3.3.3-4.1 1.8-.6 3 2.3 1 1.7-.5.4-.6 1.3-.2 1.9.8-.3 1.5-.7 2.1-1.1-.7-2 .9-3.7 3-3.3.5 1.2-.6 2.3-1 3.2 3.1.9 3.6-3.........完整代码请登录后点击上方下载按钮下载查看