Question

我的页面下有一部分带有图像和不同大小的文本。在悬停时，我希望一切都变大，但保持相同的比例。如果不手动为每个元素找到完美的过渡尺寸，我怎么能这样做呢？

Answer 1

只需转换div

div:hover{
  transform:scale(0.8);
  transform-origin: top left;
  transition: transform 200ms;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div>
  
  <img src="https://unsplash.it/458/354?image=0" alt="hi" width="300px" >
  <br>
  <h1> hello there </h1>
</div>
</body>
</html>

如何使div中的所有内容以与过渡相同的比例扩展

1 个答案: