如何使用css向左和向右扩展弹性框？

Question

因此，我正在为这个项目设置一个项目组合的基线，我希望项目出现在主页上，这样当我将鼠标悬停在它们上面时，它们就会扩展一点。一切都很正常，除了我想让盒子的高度和宽度在所有的边上均匀地扩展。当我将鼠标悬停在这些框上时，它们似乎正在向中心扩展。

​

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.project {
  width: 200px;
  height: 200px;
  border: 15px solid rgb(2, 2, 59);
  padding: 50px;
  margin: 20px;
  text-align: center;
}

.project:hover {
  width: 250px;
  height: 250px
}

#proj1 {
  background-image: url("https://images.unsplash.com/photo-1587145820266-a5951ee6f620?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Y2FsY3VsYXRvcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80");
  background-size: cover;
  background-position: center;
}

h2 {
  padding: 3%;
}

<main>
  <section>
    <section class="project" id="proj1">
      <h2>Project Name</h2>
      <p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat veniam alias, beatae, eos quidem nostrum tempore provident molestiae officia qui vero at sed consectetur reprehenderit repellat hic omnis aliquam! Saepe!</p1>
    </section>
    <section class="project" id="proj2">
      <h2>Project Name</h2>
      <p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id doloribus possimus quod excepturi perferendis! Eius illo, officia nihil culpa natus maiores totam dolorem animi facilis, quae reiciendis in blanditiis quam!</p1>
    </section>
  </section>
  <section>
    <section class="project" id="proj3">
      <h2>Project Name</h2>
      <p1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti labore ea, laborum placeat odit? Architecto qui quae ad atque iure impedit reiciendis ab inventore, modi asperiores aspernatur porro officiis.</p1>
    </section>
    <section class="project" id="proj4">
      <h2>Project Name</h2>
      <p1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti labore ea, laborum placeat odit? Architecto qui quae ad atque iure impedit reiciendis ab inventore, modi asperiores aspernatur porro officiis.</p1>
    </section>
  </section>
</main>

​

Answer 1

如果使用transform: scale(1.2);，那么对象在文档流中的位置和大小将保持不变。下面是一个示例：

​

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.project {
  width: 200px;
  border: 15px solid rgb(2, 2, 59);
  padding: 40px;
  margin: 40px;
  text-align: center;
  transition: transform .5s;
}

.project:hover {
  transform: scale(1.2);
}

#proj1 {
  background-image: url("https://images.unsplash.com/photo-1587145820266-a5951ee6f620?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Y2FsY3VsYXRvcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80");
  background-size: cover;
  background-position: center;
}

h2 {
  padding: 3%;
}

<main>
  <section>
    <section class="project" id="proj1">
      <h2>Project Name</h2>
      <p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat veniam alias, beatae, eos quidem nostrum tempore provident molestiae officia qui vero at sed consectetur reprehenderit repellat hic omnis aliquam! Saepe!</p1>
    </section>
    <section class="project" id="proj2">
      <h2>Project Name</h2>
      <p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id doloribus possimus quod excepturi perferendis! Eius illo, officia nihil culpa natus maiores totam dolorem animi facilis, quae reiciendis in blanditiis quam!</p1>
    </section>
  </section>
  <section>
    <section class="project" id="proj3">
      <h2>Project Name</h2>
      <p1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti labore ea, laborum placeat odit? Architecto qui quae ad atque iure impedit reiciendis ab inventore, modi asperiores aspernatur porro officiis.</p1>
    </section>
    <section class="project" id="proj4">
      <h2>Project Name</h2>
      <p1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti labore ea, laborum placeat odit? Architecto qui quae ad atque iure impedit reiciendis ab inventore, modi asperiores aspernatur porro officiis.</p1>
    </section>
  </section>
</main>

​

Answer 2

您可能应该使用缩放变换，而不是像素大小。然后可以指定变换原点。

​

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.project {
  width: 200px;
  height: 200px;
  border: 15px solid rgb(2, 2, 59);
  padding: 50px;
  margin: 20px;
  text-align: center;
  transition: all 0.3s;
}

.project:hover {
  transform: scale(1.05);
}

#proj1 {
  background-image: url("https://images.unsplash.com/photo-1587145820266-a5951ee6f620?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Y2FsY3VsYXRvcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80");
  background-size: cover;
  background-position: center;
}

h2 {
  padding: 3%;
}

<main>
  <section>
    <section class="project" id="proj1">
      <h2>Project Name</h2>
      <p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat veniam alias, beatae, eos quidem nostrum tempore provident molestiae officia qui vero at sed consectetur reprehenderit repellat hic omnis aliquam! Saepe!</p1>
    </section>
    <section class="project" id="proj2">
      <h2>Project Name</h2>
      <p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id doloribus possimus quod excepturi perferendis! Eius illo, officia nihil culpa natus maiores totam dolorem animi facilis, quae reiciendis in blanditiis quam!</p1>
    </section>
  </section>
  <section>
    <section class="project" id="proj3">
      <h2>Project Name</h2>
      <p1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti labore ea, laborum placeat odit? Architecto qui quae ad atque iure impedit reiciendis ab inventore, modi asperiores aspernatur porro officiis.</p1>
    </section>
    <section class="project" id="proj4">
      <h2>Project Name</h2>
      <p1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti labore ea, laborum placeat odit? Architecto qui quae ad atque iure impedit reiciendis ab inventore, modi asperiores aspernatur porro officiis.</p1>
    </section>
  </section>
</main>

​