Question

我正在尝试复制我在YouTube视频中看到的一个很酷的方面，其中你有两个div，每个侧面都有单独的内容，并使用旋转的y轴旋转它们并显示相反的情况。到目前为止，这只是使用html和css。

我设置了“隐藏的反面可视性，如YouTube视频所示”实际的动画效果很好，看起来很棒，但是当你将鼠标悬停在内容上然后在它完成之前返回它时会有一个小错误完全旋转前一侧跳过并排除效果。

我试过添加一个带有模糊的动画来覆盖它虽然它看起来很好并且增加了翻转的效果它仍然没有帮助我的问题，我已经尝试了很多想法但它仍然没有帮助。我已经尝试将溢出隐藏到所有四个方面，这有点帮助但它仍然破坏了动画的整体美学，如果它看起来很奇怪......

有没有人知道解决这个问题.... html代码是：

.front {
  background: -webkit-linear-gradient(left,#91043c,teal);
  background: -moz-linear-gradient(right,#91043c,teal);
  background: -o-linear-gradient(right,#91043c,teal);
  background: linear-gradient(left,#91043c,teal);	
  margin:0.2% 0.2% 0.2% 0.2%;
  border-radius:10px;
  height:132px;					
  width:22.2%;
  transform: perspective(600px) rotateY(0deg);
  transition: transform 0.87s linear 0s;
  backface-visibility:hidden;			
  position: absolute;
}
.Bx:hover > .front {
  transform: perspective(600px) rotateY( -180deg);
  overflow: hidden;
  -webkit-animation: CardsAnime 0.88s infinite 0s;
  -moz-animation: CardsAnime 0.88s infinite 0s;
  -o-animation: CardsAnime 0.88s infinite 0s;
  animation: CardsAnime 0.88s infinite 0s;					
}
@keyframes CardsAnime {
  20%{z-index: 1; box-shadow:2px 0px 2px 1px rgba(0,149,255,2)}
  40%{z-index: 1; box-shadow:8px 0px 2px 2px rgba(0,149,255,4)}
  60%{z-index: 1; box-shadow:4px 0px 2px 2px rgba(0,149,255,6)}
  80%{z-index: 1; box-shadow:8px 0px 4px 2px rgba(8,255,245,4)}
  100%{z-index: 1; box-shadow:2px 0px 4px 1px rgba(12,235,222,2)}
}
.back {
  background: -webkit-linear-gradient(left,teal,#91043c);			
  background: -moz-linear-gradient(right,teal,#91043c);
  background: -o-linear-gradient(right,teal,#91043c); 
  background: linear-gradient(left,teal,#91043c);
  transform: perspective(600px) rotateY(180deg);
  transition: transform 0.87s linear 0s;
  backface-visibility:hidden;			
  position: absolute;overflow:hidden;	
  margin:0.2% 0.2% 0.2% 0.2%;
  border-radius:12px;
  width:21.2%;
  height:132px;
}
.Bx:hover > .back {
  transform: perspective(600px) rotateY( 0deg);
  overflow: hidden;
  float:left;
  -webkit-animation: CardsAnime2 0.88s linear 0.12s;
  -moz-animation: CardsAnime2 0.88s linear 0.12s;
  -o-animation: CardsAnime2 0.88s linear 0.12s;
  animation: CardsAnime2 0.88s linear 0.12s;
}
@keyframes CardsAnime2 { 
  20%{filter:blur(4px);}
  40%{filter:blur(8px);}
  80%{filter:blur(4px);}
}

<wrapper id="Cards">
  <div id="Box1" class="s3D">
     <div class="Bx">
         <div class="Box1 Flip3D front">Content1</div>	
         <div class="Box1 Flip3D back">Info Back</div>
    </div>
  </div>
</wrapper>

我仍然非常擅长编码（3个星期）并且已经搜索过，但它也是很长一个问题放在谷歌，我只发现在这里找到的线程非常模糊的答案。或者我发现的最接近的问题是使用jquery和javascript完全不同的问题。和其他代码必须有一个CSS的答案？也许..任何帮助都会很棒。

使用html＆amp; amp; css仅旋转：Y轴

0 个答案: