Question

我有一个包含文本的div，当链接悬停时，该文本会使用CSS转换/转换。但是，我不明白它为什么会起作用，当我使用这些值时，它会改变div的结束位置（绝对居中于vert和horiz）。我想改变divs STARTING位置

HTML

<div class="bg-img" style="background-image:url('...');">

   <a href="#" class="linkage"></a>

   <!-- Put cat div overtop article -->
   <div class="cat-cell">
        text is here
   </div>

</div>

CSS

.cat-cell {
  position: absolute;
  top: 50%; right: 0; left: 0; bottom: auto;
  margin: 0 auto;
  z-index: 9;
  opacity: 0; 
  text-align: center;
  max-width: 60%;

  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;    
  transition: all 0.5s ease;    
}

.linkage:hover + .cat-cell {
  opacity: 1;

  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.cat-cell div淡入并从父div的底部向上移动一定量到父div的中心。我想缩短它向上移动的数量（看起来它向上移动大约100px，我希望它只向上移动50到达中心）。但是，当我更改任何值时，它不再在转换结束时居中于父级。

Answer 1

转换的起始位置由初始状态（.cat-cell CSS）决定。

只要.linkage：hover为“active”，modal就会将.cat-cell的大小提高50％。

因此translateY(-50%)设置元素的结束状态，而.linkage:hover + .cat-cell告诉浏览器显示转换可能会更改属性的值（在这种情况下为transition: all 0.5s ease和{{1} }}）。

此外，最好不要使用opacity，因为浏览器将尝试转换元素的所有属性。请改用transform。

控制转换CSS的起点

1 个答案: