CSS镜像展开容器问题：文字反转与hover抖动求解

我正在为作品集制作一款可展开的样式容器，希望右侧区域的元素能实现与左侧方向相反的镜像展开效果，但目前陷入困境：

• 用scaleX(-1)实现镜像后，内部文本也被反转，不符合项目需求
• 鼠标hover右侧元素时会出现奇怪的抖动现象

实现思路 #

• 设计可展开容器，展开时显示内部文本，采用Grid布局定位元素
• 因设计较复杂，使用::before和::after伪元素承载文本
• 左侧元素运行正常，但右侧元素尝试镜像展开时出现问题

当前右侧元素的CSS代码 #

.main3 {
  display: block;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  transform: scaleX(-1);
}

完整代码 #

CSS代码 #

.gridContainer {
  display: grid;
  grid-template-columns: 100px auto auto 100px;
  grid-template-rows: repeat(4, auto);
  row-gap: 100px;
}

.main {
  display: block;
  grid-column-start: 2;
  grid-column-end: 3;
}

.main2 {
  display: block;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

.main3 {
  display: block;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  transform: scaleX(-1);
}

.main3 span {
}

.main3 .background::before {
  width: 35%;
}

.test {
  z-index: 100;
  width: 400px;
  height: 100px;
  background-color: #67ade0;
  position: absolute;
  border-bottom-style: solid;
  border-color: #93cff1;
  border-width: 100px;
  clip-path: polygon(10% 0%, 5% 50%, 10% 100%, 5% 100%, 0% 50%, 5% 0%);
}

.background {
  display: inline-block;
  margin-left: 20px;
  width: 0px;
  height: 200px;
  background-color: #e1effa;
  clip-path: polygon(95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%, 5% 0);
  transition: width 6.5s, transform 5s;
  z-index: 10;
  opacity: 0.8;
}

.diamondStatic {
  margin-left: 20px;
  display: inline-block;
  position: absolute;
  height: 200px;
  width: 400px;
  background-color: #c4e0f5;
  clip-path: polygon(5% 0, 10% 50%, 5% 100%, 0% 50%);
}

.diamondAnimate {
  margin-left: -20px;
  display: inline-block;
  z-index: 100px;
  height: 200px;
  width: 400px;
  background-color: #c4e0f5;
  clip-path: polygon(5% 0, 10% 50%, 5% 100%, 0% 50%);
  transition: margin-left 6.5s, transform 5s;
}

.test:hover ~ .background {
  width: 400px;
}

.test:hover ~ .diamondAnimate {
  margin-left: -45px;
}

.background::after {
  margin-top: 10px;
  margin-left: 140px;
  position: absolute;
  content: 'Managed Services';
}

.background::before {
  width: 15%;
  margin-top: 50px;
  margin-left: 50px;
  position: absolute;
  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget erat maximus, mattis ex sed, aliquet arcu. Maecenas eleifend ornare nulla, id placerat turpis pretium quis. Class aptent taciti sociosqu.';
}

.innerBtn {
  display: inline;
  position: absolute;
  margin-top: 150px;
  margin-left: 160px;
}

HTML代码 #

<div class="gridContainer">
  <div class="main">
    <div class="test"></div>
    <div class="diamondStatic"></div>
    <span class="background">
          <button class="innerBtn">CLICK ME</button>
        </span>
    <div class="diamondAnimate"></div>
  </div>

  <div class="main2">
    <div class="test"></div>
    <div class="diamondStatic"></div>
    <span class="background">
          <button class="innerBtn">CLICK ME</button>
        </span>
    <div class="diamondAnimate"></div>
  </div>

  <div class="main3">
    <div class="test"></div>
    <div class="diamondStatic"></div>
    <span class="background">
          <button class="innerBtn">CLICK ME</button>
        </span>
    <div class="diamondAnimate"></div>
  </div>
</div>

补充说明 #

我也曾尝试另一种重构方式，但遇到背景仅需在展开区域显示的难题。

内容的提问来源于stack exchange，提问作者92Infinitus92