翻转已设置样式的容器

Question

这是我正在使用的笔，我想为我的作品集创造一些更有趣的东西，但当我想让屏幕右侧的相同元素进行相同的扩展，但向另一个方向(镜像/翻转/还原/相反(时，我一直坚持这一部分。

完整的代码可以在笔中查看。https://codepen.io/benjaminj/pen/oNqWPRb

正如你所看到的，我使用了比例，但这也翻转了，里面的文本并不是这个项目的最终目标。同样，当悬停在右边的元素时，会发生奇怪的颤抖，我也不知道是从哪里来的。

1. 我设计了一个具有展开侧的容器，其中显示了容器的文本。在我看来，网格也是定位元素的最佳方式。下面是HTML代码：

2. 因为(对我来说(非常奇怪和复杂的设计，我在文本中使用了：before和：after。

3. 左边的元素是一种魅力，但当我试图"；镜像；那些元素在右边，并扩展到屏幕的中心，麻烦就开始了。

但对于右侧的元素，我只使用了scaleX(-1(

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

---

这是代码

.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;
}

<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>

从代码笔的视觉框中可以看到，右侧的元素在颤抖，文本被倒置。这个问题似乎超出了我的知识范围，这就是我鼓起勇气在这里发帖的原因。

附言：我也试过用另一种方法重建整个容器(https://codepen.io/benjaminj/pen/zYWwyeQ)但在这里，我偶然发现了一个背景，我希望只在不断扩大的区域中可见。

Answer 1

对于正在翻转的测试：您只需要transform:scaleX(-1)以及内部div.background

对于悬停抖动，是因为水平滚动显示然后隐藏，所以在.main中使用overflow: hidden

我还改进了你的代码，删除了重复的属性和其他次要的东西

body {
margin: 0;
overflow: hidden
}
.gridContainer {
display: grid;
grid-template-columns: 100px auto auto 100px;
grid-template-rows: repeat(4, auto);
row-gap: 100px;
}
.main {
grid-column: 2 / 3;
overflow: hidden
}
.main2 {
grid-row: 2 / 3;
}
.main3 {
grid-column: 3 / 4;
transform: scaleX(-1);
}
.main3 .background {
transform: scaleX(-1);
}
.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-flex;
margin-left: 20px;
width: 0;
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;
opacity: 0.8;
}
.diamondStatic,
.diamondAnimate {
display: inline-block;
position: absolute;
height: 200px;
width: 400px;
background-color: #c4e0f5;
clip-path: polygon(5% 0, 10% 50%, 5% 100%, 0% 50%);
}
.diamondStatic {
margin-left: 20px;
}
.diamondAnimate {
margin-left: -20px;
transition: margin-left 6.5s, transform 5s;
}
.test:hover~.background {
width: 400px;
}
.test:hover~.diamondAnimate {
margin-left: -45px;
}
.background::before {
max-width: 75%;
margin-top: 50px;
margin-left: 50px;
content: attr(data-text)
}
.background::after {
margin-top: 10px;
margin-left: 140px;
position: absolute;
content: attr(data-title);
}
.innerBtn {
display: inline;
position: absolute;
margin-top: 150px;
margin-left: 160px;
}

<div class="gridContainer">
<div class="main">
<div class="test"></div>
<div class="diamondStatic"></div>
<span class="background" data-title="Managed Services" data-text="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.">
<button class="innerBtn">CLICK ME</button>
</span>
<div class="diamondAnimate"></div>
</div>
<div class="main main2">
<div class="test"></div>
<div class="diamondStatic"></div>
<span class="background" data-title="Managed Services" data-text="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.">
<button class="innerBtn">CLICK ME</button>
</span>
<div class="diamondAnimate"></div>
</div>
<div class="main main3">
<div class="test"></div>
<div class="diamondStatic"></div>
<span class="background" data-title="Managed Services" data-text="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.">
<button class="innerBtn">CLICK ME</button>
</span>
<div class="diamondAnimate"></div>
</div>
</div>