html - CSS :hover and transform

Question

我有这种情况:

HTML:

<div class="button"></div>

CSS:

.button { 
   position:absolute; 
   left:0; top:0; 
   transform: translateY(50px); 
}

.button:hover { 
   transform: scale(1.2); /* keep the original transform */
}

有没有办法在悬停时只添加缩放变换而不覆盖平移？

Answer 1

是的，只需将这两个转换结合起来，就像这样:

transform: translateY(50px) scale(1.2);

FIDDLE

.button {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(50px);
  border: 1px solid green;
}
.button:hover {
  transform: translateY(50px) scale(1.2);
}

<button class="button">hello</button>