Question

我有一个旋转的背景图像（示意图）。但是我需要将该图像的中心降低。

如果您将其视为旋转的光盘，则应该只看到光盘的顶部，而不是底部。

我需要它保持在相同的边框/框架区域内。我需要“产品图片”保持居中位置。

您可以在这里看到我的物品

http://www.meteorsite.com/images/spinner/

提前感谢您的任何建议...

$("#slideshow > div:gt(0)").hide();
    
    setInterval(function() {
      $('#slideshow > div:first')
        .fadeOut(3000).next().fadeIn(3000).end()
        .appendTo('#slideshow');console.log($('#slideshow > div:first').height()+'-'+$('#slideshow > div:first').width())
    }, 5000);

  *{margin:0;padding:0;box-sizing:border-box}
    
        #slideshow {
      
        text-align: center;
        width: 100%;
        height: 100%;
        top: 50;
        left: 0;
        right: 0;
        bottom: 0;
        }
        #slideshow > div {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        }
    
        .wrapper {
         width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: bend 1s linear 0s alternate;  /*linear XS is delay before disc 
       flaps down*/
       -webkit-animation-fill-mode: forwards;
       }
    
      .vinyl {
      
       width: 600px;
       height: 600px;
       border-radius: 50%;
       animation: moveLeft 0s linear 0s alternate, spin 30s linear 0s infinite; /* 
       time to spin, etc */
       }
        .vinyl div {
        border: 0px solid #222;
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        padding: 5px;
        border-radius: 50%;
        }
       .vinyl__label {
        border: none;
        background: white;
        color: white;
        text-align: center;
        background-image: url(schemo.gif);
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        }
      
    @keyframes spin {
      0% {
        transform: rotateZ(0deg) rotateY(0deg);
      }
      25% {
        transform: rotateZ(90deg) rotateY(0deg);
      }
      75% {
        transform: rotateZ(270deg) rotateY(0deg);
      }
      100% {
        transform: rotateZ(360deg) rotateY(0deg);
      }
    }
    @keyframes bend {    /* how far the disc leans back*/
      from {
        transform: rotateX(55deg);
    	
      }
      to {
        transform: rotateX(55deg);
      }
    }
    
    
    @keyframes moveLeft {
      transition: all 2s ease-in-out;
      -webkit-transition: all 2s ease-in-out;
      /** Chrome & Safari **/
      -moz-transition: all 2s ease-in-out;
      /** Firefox **/
      -o-transition: all 2s ease-in-out;
      /** Opera **/
      from {
        transform: translate(350px, 0);
      }
      to {
        transform: translate(350px, 0);
      }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position: absolute;left: 0;right: 0;margin: auto">
    <div class="wrapper" style="position: relative;"> 
    	<div style="box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);">   
    	  <div class="vinyl">    
    		<div class="vinyl__label">
    		  <i class="fa fa-circle" aria-hidden="true"></i>
    		</div>    
    	  </div>
    	</div>	
    </div>
    <div id="slideshow" style="position: absolute;">
      
    <div style="background: url(&quot;http://web3designs.com/spin/slide-1.gif&quot;) center center no-repeat;"></div><div style="background: url(&quot;http://web3designs.com/spin/slide-2.gif&quot;) center center no-repeat; display: none;"></div><div style="background: url(&quot;http://web3designs.com/spin/slide-3.gif&quot;) center center no-repeat; display: none;"></div></div>
    </div>

这是光盘位置的简要说明：

Answer 1

您必须将tsc添加到perspective中才能使其成为真正的3D。

然后围绕.wrapper轴旋转.vinyl以设置视角并围绕X轴旋转，旋转和旋转：

$(() => {
  $("#slideshow > div:gt(0)").hide();

  setInterval(function() {
    $('#slideshow > div:first')
      .fadeOut(3000).next().fadeIn(3000).end()
      .appendTo('#slideshow');
   //console.log($('#slideshow > div:first').height() + '-' + $('#slideshow > div:first').width())
  }, 5000);
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

#slideshow {
  text-align: center;
  width: 100%;
  height: 100%;
  top: 50;
  left: 0;
  right: 0;
  bottom: 0;
}

#slideshow>div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: bend 1s linear 0s alternate;
  /*linear XS is delay before disc 
   flaps down*/
  -webkit-animation-fill-mode: forwards;
  perspective:1000px;
}

.wrapper > div {overflow:hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);}

.vinyl {
  width: 600px;
  height: 600px;
  border-radius: 50%; border:solid 1px;
  transform: translateY(50%) rotateX(60deg) rotateZ(0);
  animation: moveLeft 0s linear 0s alternate, spin 30s linear 0s infinite;
  /* 
   time to spin, etc */
}

.vinyl div {
  border: 0px solid #222;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding: 5px;
  border-radius: 50%;
}

.vinyl__label {
  border: none;
  background: white;
  color: white;
  text-align: center;
  background-image: url(https://etap.com/images/default-source/product/electrical-single-line-diagram/electrical-single-line-diagram-53a2be6450c286c028629ff00005ae238.jpg?sfvrsn=14);
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes spin {
  100% {
    transform: translateY(50%) rotateX(60deg) rotateZ(360deg);
  }
}

@keyframes bend {
  /* how far the disc leans back*/
  from {
    transform: rotateX(55deg);
  }
  to {
    transform: rotateX(55deg);
  }
}

@keyframes moveLeft {
  transition: all 2s ease-in-out;
  -webkit-transition: all 2s ease-in-out;
  /** Chrome & Safari **/
  -moz-transition: all 2s ease-in-out;
  /** Firefox **/
  -o-transition: all 2s ease-in-out;
  /** Opera **/
  from {
    transform: translate(350px, 0);
  }
  to {
    transform: translate(350px, 0);
  }
}

如何向下移动背景图像的中心点？

1 个答案: