css 转换不适用于 css 网格，元素定位问题

Question

我正在尝试在我的网格元素上应用 CSS transform，所以在 :hover 上我在边界上得到了一个很好的过渡。

我做错了什么，很可能是元素和网格的定位导致它无法正常工作。

应用 transform scaleX 时，边框会消失并且不会在悬停时按预期显示。

.work {
	background: var(--white);
}
.work-wrapper {
	max-width: 1170px;
	padding: 1em;
	margin: auto;
	display: grid;
	grid-template-columns:repeat( auto-fill, minmax(260px, 1fr) );
	grid-row-gap: 30px;
	grid-column-gap: 15px;
	place-items: center start;
	background: #333;
}
.work-item {
	height:180px;
	width:260px;
	position: relative;
	background: var(--lilavo);
	margin: auto;
  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.4);
}
.item::before {
	content: '';
	position: absolute;
	top: 10px;
	left: 10px;
	right:10px;
	bottom: 10px;
	border-top: 1px solid var(--white);
	border-bottom: 1px solid var(--white);
	transition: 0.5s;
	-webkit-transform:scaleX(0);
    -moz-transform:scaleX(0);
    -ms-transform:scaleX(0);
    -o-transform:scaleX(0);
    transform:scaleX(0);
	opacity: 0;
}
.item::before:hover {
	-webkit-transform:scaleX(1);
    -moz-transform:scaleX(1);
    -ms-transform:scaleX(1);
    -o-transform:scaleX(1);
    transform:scaleX(1);
		opacity: 1;
}

<section id="work" class="work">
      <h2>Work</h2>
      <div class="work-wrapper">
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
      </div>
    </section>

Answer 1

使用 .item 和 .work-item:hover > .item 选择器代替 .item::before 和 。 item::before:hover 分别。它会起作用! :)

.work {
	background: var(--white);
}
.work-wrapper {
	max-width: 1170px;
	padding: 1em;
	margin: auto;
	display: grid;
	grid-template-columns:repeat( auto-fill, minmax(260px, 1fr) );
	grid-row-gap: 30px;
	grid-column-gap: 15px;
	place-items: center start;
	background: #333;
}
.work-item {
	height:180px;
	width:260px;
	position: relative;
	background: var(--lilavo);
	margin: auto;
  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.4);
}
.item {
	content: '';
	position: absolute;
	top: 10px;
	left: 10px;
	right:10px;
	bottom: 10px;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	transition: 0.5s;
	-webkit-transform:scaleX(0);
    -moz-transform:scaleX(0);
    -ms-transform:scaleX(0);
    -o-transform:scaleX(0);
    transform:scaleX(0);
	opacity: 0;
}
.work-item:hover > .item {
	-webkit-transform:scaleX(1);
    -moz-transform:scaleX(1);
    -ms-transform:scaleX(1);
    -o-transform:scaleX(1);
    transform:scaleX(1);
		opacity: 1;
}

<section id="work" class="work">
      <h2>Work</h2>
      <div class="work-wrapper">
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
        <div class="work-item">
          <div class="item item-one"></div>
        </div>
      </div>
    </section>

您也可以在这里进行测试.. https://jsfiddle.net/nimittshah/tj95b6kL/