当用户在按钮上摩口时，另一个DIV或HTML标签将滑出

Question

我有问题，试图在用户鼠标悬停按钮时滑出。我的代码如下所示：

/**
     * CSS3 balancing hover effect
     * Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
     */
body {
  background: #f06;
  background: linear-gradient(45deg, #f06, yellow);
  min-height: 100%;
}
.block {
  width: 150px;
  color: #fff;
  margin: 30px auto;
  text-transform: uppercase;
  text-align: center;
  font-family: Helvetica;
  position: relative;
  perspective: 350;
}
.block .normal {
  background: gray;
  padding: 15px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.block .hover {
  margin-top: -48px;
}
.block .hover {
  background: #00aced;
  left: 150px;
  padding: 15px;
  display: none;
  color: #fff;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: all 250ms ease;
}
.block:hover .normal {
  background: #0084b4;
}
.block:hover .hover {
  margin-right: 0;
  display: block;
  transform-origin: top;
  /*
    	animation-name: balance;
    	animation-duration: 1.5s;
    	animation-timing-function: ease-in-out;
    	animation-delay: 110ms;
    	animation-iteration-count: 1;
    	animation-direction: alternate;
    	*/
  animation: balance 1.5s ease-in-out 110ms 1 alternate;
}
@keyframes balance {
  0% {
    margin-top: -48px;
  }
  15% {
    margin-top: -48px;
    transform: rotateY(-50deg);
  }
  30% {
    margin-top: -48px;
    transform: rotateY(50deg);
  }
  45% {
    margin-top: -48px;
    transform: rotateY(-30deg);
  }
  60% {
    margin-top: -48px;
    transform: rotateY(30deg);
  }
  75% {
    margin-top: -48px;
    transform: rotateY(-30deg);
  }
  100% {
    margin-top: -48px;
    transform: rotateY(0deg);
  }
}

<div class="block">
  <div class="normal">
    <span>Follow me...</span>
  </div>
  <a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
    on Twitter
  </a>
</div>

我可以知道该怎么做才能使其在左侧滑动不摇晃？我确实尝试了很多方法，例如过渡：0.5s易于0s;还有许多其他，但行不通。我可以知道该怎么办，让它在左手滑梯上滑出吗？

Answer 1

检查一下。我已经通过评论为CSS来解释代码。

/**
 * CSS3 balancing hover effect
 * Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
 */
body {
  background: #f06;
  background: linear-gradient(45deg, #f06, yellow);
  min-height: 100%;
}
.block {
  width: 150px;
  color: #fff;
  margin: 30px auto;
  text-transform: uppercase;
  text-align: center;
  font-family: Helvetica;
  position: relative;
  perspective: 350;
}
.block .normal {
  background: gray;
  padding: 15px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.block .hover {
  background: #00aced;
  padding: 15px;
  display: block;
  color: #fff;
  text-decoration: none;
  position: absolute;
  right: 0px;/*add this to make it position absolutely right to the parent so that it can slide out to left.*/
  top: 0;/*add this to make it position absolutely top to the parent*/
  z-index: 1;
  transition: all 250ms ease;
}
.block:hover .normal {
  background: #0084b4;
}
.block:hover .hover {
  margin-right: 0;
  right: 150px;/*add this to make it slide to left on hover*/
  transform-origin: top;
  /*
	animation-name: balance;
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
	animation-delay: 110ms;
	animation-iteration-count: 1;
	animation-direction: alternate;
	*/
  animation: balance 1.5s ease-in-out 110ms 1 alternate;
}
@keyframes balance {
  0% {
    margin-top: 0;
  }
  15% {
    margin-top: 0;
    transform: rotateX(-50deg);
  }
  30% {
    margin-top: 0;
    transform: rotateX(50deg);
  }
  45% {
    margin-top: 0;
    transform: rotateX(-30deg);
  }
  60% {
    margin-top: 0;
    transform: rotateX(30deg);
  }
  75% {
    margin-top: 0;
    transform: rotateX(-30deg);
  }
  100% {
    margin-top: 0;
    transform: rotateX(0deg);
  }
}

<div class="block">
  <div class="normal">
    <span>Follow me...</span>
  </div>
  <a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
		on Twitter
	</a>
</div>

Answer 2

只需从.block:hover .hover部分删除动画，就应该将其滑出。但是，您可能需要给它一个固定的宽度。

.block .hover {
  background: #00aced;
  padding: 15px;
  display: block;
  color: #fff;
  text-decoration: none;
  position: absolute;
  width: 110px; /* to wrap the words, you can change it according to your design*/
  right: 0px;/*add this to make it position absolutely right to the parent so that it can slide out to left.*/
  top: 0;/*add this to make it position absolutely top to the parent*/
  z-index: 1;
  transition: all 250ms ease;
}
.block:hover .hover {
      margin-right: 0;
      right: 150px;/*add this to make it slide to left on hover*/
      transform-origin: top;
    }