CSS slider 表现异常

Question

所以我正在学习 CSS 转换和转换，并尝试在 CodePen 中制作一个简单的 slider 。基本思想是我有一个 div 在另一个之上，我希望第一个在悬停时从第二个上滑落。它在没有任何 overflow 属性的情况下工作正常，但是一旦我添加 overflow: hidden 到下面的正方形，它就会将上面的正方形向下推。这是为什么？

http://codepen.io/johnnycopes/pen/BKReOq

--- HTML ---

<div class="container">
  <div class="shape">
    <div class="shape-cover">
    </div>
  </div>
</div>

--- CSS ---

body {
  font-family: Verdana;
  background: #fff0a5;
}

.container {
  margin: 0 auto
}

.shape {
  margin: 50px auto 0;
  width: 200px;
  height: 200px;
  overflow: hidden;
  background: #ffb03b;
}

.shape-cover {
  margin: 50px auto 0;
  height: 200px;
  width: 200px;
  background: #468966;
  transform: translateX(0%);
  transition: transform .5s ease-in-out;
}

.shape-cover:hover {
  transform: translateX(100%);
}

Answer 1

这是因为您在“覆盖方 block ”上使用了边距。

shape-cover 位于形状内部，因此 shape-cover 的边距将相对于其父级。

因此请尝试移除 shape-cover div 上的边距。