Параллелограмм с анимацией развертывания / свертывания (ссылка на Warframe)

Question

Я хочу сделать Parallelogram с анимацией разворачивания / свертывания (я думаю, что она как бы пересекается).

Это базовая модель дизайна из пусковой установки игры Warframe .

С помощью друга у нас есть анимация. Однако мы не можем заставить Parallelogram работать должным образом (он рисует эскиз).

Вот наш тестовый код анимации (пожалуйста, проверьте ссылку. Это просто Javascript из-за требования почтового индекса.

let isInfoDivCreated = false;
let isResetClicked = false;
let clickedSection;

function createRuntimeInfoDiv(id) {
    if (isInfoDivCreated && id !== clickedSection) {
        if (document.getElementById("pImg1" + "infoDiv")) {
            document.getElementById("pImg1" + "infoDiv").remove();
        }
        if (document.getElementById("pImg2" + "infoDiv")) {
            document.getElementById("pImg2" + "infoDiv").remove();
        }
        if (document.getElementById("pImg3" + "infoDiv")) {
            document.getElementById("pImg3" + "infoDiv").remove();
        }
        if (document.getElementById("pImg4" + "infoDiv")) {
            document.getElementById("pImg4" + "infoDiv").remove();
        }
        isInfoDivCreated = false;
    }
    if (!isInfoDivCreated && !isResetClicked) {
        clickedSection = id;
        var infoDiv = document.createElement('div');
        infoDiv.id = id + "infoDiv";
        infoDiv.setAttribute('class', 'infoDiv');
        isInfoDivCreated = true;
        if (id === "pImg1") {
        let innerInfoDiv = document.createElement('div');
        innerInfoDiv.id = id + "innerInfoDiv";
        innerInfoDiv.setAttribute('class', 'innerInfoDiv');

            let info = document.createElement("p");
            info.innerHTML = "Test"
            let info1 = document.createElement("p");
            info1.innerHTML = "Test"
            let info2 = document.createElement("p");
            info2.innerHTML = "Test"
            let button = document.createElement("button1");
            button.innerHTML = "Test Button";
            button.addEventListener("click", function () {
                window.parent.location.href = '';
            });
            let backImage = document.createElement("img");
            backImage.setAttribute('src', 'https://static.wixstatic.com/media/b8044a_2f1720c9043e4f94bee61cab482f5664~mv2.png');
            backImage.addEventListener('click', function () {
                resetMe();
            });
            backImage.setAttribute('class', 'backbtnImage');

            let title = document.createElement("span");
            title.innerHTML = "Test Title";
            title.setAttribute('class', 'headline');
            infoDiv.appendChild(backImage);
            infoDiv.appendChild(title);

            infoDiv.appendChild(info);
            infoDiv.appendChild(info1);
            infoDiv.appendChild(info2);
            infoDiv.appendChild(button);
            document.getElementById(id).appendChild(infoDiv);
        }
        if (id === "pImg2") {
            let info = document.createElement("p");
            info.innerHTML = "Test "
            let info1 = document.createElement("p");
            info1.innerHTML = "Test"
            let info2 = document.createElement("p");
            info2.innerHTML = ">> Test"
            let info3 = document.createElement("p");
            info3.innerHTML = ">> Test"
            let info4 = document.createElement("p");
            info4.innerHTML = ">> Test"

            let button = document.createElement("button2");
            button.innerHTML = "Test Button";
            button.addEventListener("click", function () {
                window.parent.location.href = '';
            });

            let title = document.createElement("span");
            title.innerHTML = "Test Button";
            title.setAttribute('class', 'headline');
            let backImage = document.createElement("img");
            backImage.setAttribute('src', 'https://static.wixstatic.com/media/b8044a_2f1720c9043e4f94bee61cab482f5664~mv2.png');
            backImage.addEventListener('click', function () {
                resetMe();
            });
            backImage.setAttribute('class', 'backbtnImage');
            infoDiv.appendChild(backImage);
            infoDiv.appendChild(title);
            infoDiv.appendChild(info);
            infoDiv.appendChild(info1);
            infoDiv.appendChild(info2);
            infoDiv.appendChild(info3);
            infoDiv.appendChild(info4);
            infoDiv.appendChild(button);
            document.getElementById(id).appendChild(infoDiv);
        }
        if (id === "pImg3") {
            let info = document.createElement("p");
            info.innerHTML = "Test"
            let info1 = document.createElement("p");
            info1.innerHTML = ">> Test";
            let info2 = document.createElement("p");
            info2.innerHTML = ">> Test";
            let info3 = document.createElement("p");
            info3.innerHTML = ">> Test";
            let button = document.createElement("button3");
            button.innerHTML = "Test Button";
            button.addEventListener("click", function () {
                window.parent.location.href = '';
            });
            let backImage = document.createElement("img");
            backImage.setAttribute('src', 'https://static.wixstatic.com/media/b8044a_2f1720c9043e4f94bee61cab482f5664~mv2.png');
            backImage.addEventListener('click', function () {
                resetMe();
            });
            backImage.setAttribute('class', 'backbtnImage');

            let title = document.createElement("span");
            title.innerHTML = "Test Title";
            title.setAttribute('class', 'headline');
            infoDiv.appendChild(backImage);
            infoDiv.appendChild(title);
            infoDiv.appendChild(info);
            infoDiv.appendChild(info1);
            infoDiv.appendChild(info2);
            infoDiv.appendChild(info3);
            infoDiv.appendChild(button);
            document.getElementById(id).appendChild(infoDiv);
        }
        if (id === "pImg4") {

            let info = document.createElement("p");
            info.innerHTML =
                "Test"
            let info1 = document.createElement("p");
            info1.innerHTML ="Test"


            let button = document.createElement("button4");
            button.innerHTML = "Test Button";
            button.addEventListener("click", function () {
                window.parent.location.href = '';
            });
            let title = document.createElement("span");
            title.innerHTML = "Test Title";
            title.setAttribute('class', 'headline');
            let backImage = document.createElement("img");
            backImage.setAttribute('src', 'https://static.wixstatic.com/media/b8044a_2f1720c9043e4f94bee61cab482f5664~mv2.png');
            backImage.addEventListener('click', function () {
                resetMe();
            });
            backImage.setAttribute('class', 'backbtnImage');
            infoDiv.appendChild(backImage);
            infoDiv.appendChild(title);
            infoDiv.appendChild(info);
            infoDiv.appendChild(info1);
            infoDiv.appendChild(button);
            document.getElementById(id).appendChild(infoDiv);
        }

    }
    isResetClicked = false;
}

function resetMe() {
    if (isInfoDivCreated) {
        if (document.getElementById("pImg1" + "infoDiv")) {
            document.getElementById("pImg1" + "infoDiv").remove();
        }
        if (document.getElementById("pImg2" + "infoDiv")) {
            document.getElementById("pImg2" + "infoDiv").remove();
        }
        if (document.getElementById("pImg3" + "infoDiv")) {
            document.getElementById("pImg3" + "infoDiv").remove();
        }
        if (document.getElementById("pImg4" + "infoDiv")) {
            document.getElementById("pImg4" + "infoDiv").remove();
        }
    }
    isResetClicked = true;
    clickedSection = ""
}

Я провел исследование и сделал это . Но комбинация вызвала хаос в коде.

<div class="skewed">
   <img class="img-responsive dist" src="http://www.personal.psu.edu/wzz5072/mini.jpg">
</div>

Answer 1

Этот простой HTML / css может помочь вам.

.wrapper {
  max-width:600px;
  height:300px;
  overflow:hidden;
  display:flex;
  background-image: url(http://www.personal.psu.edu/wzz5072/mini.jpg);
}
.imgwrapper {
  width:150px;
  height:300px;
  overflow:hidden;
  transform:skewx(30deg);
  position:relative;
  transition: width .4s ease-in-out;
  transform-origin:top top;
}
.imgwrapper:hover {
  width:100%;
  cursor:pointer;
}
.img-responsive {
  position:absolute;
  width:auto;
  height:100%;
  left:-90px;
  top:0;
  transform:skewx(-30deg) scale(1);
  transition: transform 1s ease-in-out;
}
.imgwrapper:hover .img-responsive {
  transform:skewx(-30deg) scale(1.2);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="wrapper">
    <div class="imgwrapper">
      <img class="img-responsive dist" src="http://www.personal.psu.edu/wzz5072/mini.jpg">
    </div>
    <div class="imgwrapper">
      <img class="img-responsive dist" src="http://www.personal.psu.edu/wzz5072/mini.jpg">
    </div>
    <div class="imgwrapper">
      <img class="img-responsive dist" src="http://www.personal.psu.edu/wzz5072/mini.jpg">
    </div>
    <div class="imgwrapper">
      <img class="img-responsive dist" src="http://www.personal.psu.edu/wzz5072/mini.jpg">
    </div>
  </div>
</body>
</html>

Answer 2

Попробуйте клип-путь https://developer.mozilla.org/ru/docs/Web/CSS/clip-path

.style_prevu_kit {
    -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    margin: 0 -5%;
}