Search code examples
htmlcsscss-transitionscss-gridcss-transforms

Flipping the styled container

This is the pen I am working on and I want to create something more interesting for my portfolio, but I've stuck on the part when I want to have the same elements on the right side of the screen doing the same expanding but to the other direction (mirrored/flipped/reverted/opposite).

The full code can be viewed in the pen. https://codepen.io/benjaminj/pen/oNqWPRb

As You can see I have used scale but this also flipped and the text inside which is not the end goal of this project. Also when hovering the elements on the right weird tremble occurs which also I don't get from where is coming.

  1. I have designed a container with expanding side where the text of the container is revealed. Also a grid seemed to me the best for positioning the elements. Below is the HTML code:

  2. Because of the pretty weird and complex (for me) design I have used: before and: after for the text.

  3. The elements on the left side are working as a charm, but when I tried to "mirror" those elements on the right side and expand to the center of the screen the troubles started.

But for the element on the right side I used only the scaleX (-1)

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

Here is the code

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

As You can see from the visual box of the codepen, the element on the right side is trembling and the text is inverted. This issue seems to be outside of my little knowledge and that's the reason for taking the guts and posting here.

PS: I have also tried to rebuild the whole container on another way ( https://codepen.io/benjaminj/pen/zYWwyeQ) but here I stumbled with the background that I want to be visible only in the expanding area.

Solution

  • For the test being flipped: You just need to transform:scaleX(-1) also the inner div .background

    For the hover being shaking, is because the horizontal scroll showing then hiding, so use overflow: hidden in .main

    I also improved your code a bit, deleting duplicated properties and other minor stuff

    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>