如何用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>