Создание эффекта открытия окна с помощью только CSS

Я попытался создать этот эффект с помощью переходов. Это должно выглядеть так, как будто вы открываете коробку.

есть 2 проблемы:

  1. порядок закрытия коробки такой же, как и порядок ее открытия. Нужно ли вообще закрывать коробку в обратном порядке ее открытия, чтобы коробка вернулась в то же состояние, в котором она была закрыта?
  2. концы зеленых и желтых щитков спрятаны во время перехода из-за красных и голубых щитков, поэтому он не выглядит 3D. Есть ли способ показать все закрылки в 3D-режиме?

Я бы предпочел, чтобы решение было в чистом CSS , без JavaScript, пожалуйста.

#box {
  position: relative;
  top: 170px;
  left: 170px;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  perspective: 800px;
} 
#flap1, #flap2, #flap3, #flap4 {
  position: absolute;
}
#flap1 {
  background-color: red;
  width: 150px;
  height: 300px;
  z-index: 1;
  transform-origin: 0 0;
  transition: transform 1s;
}
#flap2 {
  left: 150px;
  background-color: blue;
  width: 150px;
  height: 300px;
  z-index: 1;
  transform-origin: 100% 0;
  transition: transform 1s ease 0.3s;
}
#flap3 {
  background-color: green;
  width: 300px;
  height: 150px;
  transform-origin: 0 0;
  transition: transform 1s ease 0.6s;
}
#flap4 {
  background-color: yellow;
  top: 150px;
  width: 300px;
  height: 150px;
  transform-origin: 0 100%;
  transition: transform 1s ease 0.9s;
}
#box:hover #flap1{
  transform: rotateY(-170deg);
}
#box:hover #flap2{
  transform: rotateY(170deg);
}
#box:hover #flap3{
  transform: rotateX(170deg);
}
#box:hover #flap4{
  transform: rotateX(-170deg);
}
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="box">
      <div id="flap1"></div>
      <div id="flap2"></div>
      <div id="flap3"></div>
      <div id="flap4"></div>
    </div>
  </body>
</html>
11
css css-transforms css-transitions css3 html

1 ответов

Для Вопроса 1:

если вы даете задержку в прямом порядке для :hover селекторы и в обратном порядке в селекторах по умолчанию он достигнет точной обратной анимации.

Вопрос 2:

исправление и объяснение заключаются в следующем:

  • для части продолжительности перехода зеленые и желтые коробки не выглядят так, как будто они имеют 3D-эффект, потому что есть пара элементов с более высоким z-index который размещен выше. Это предотвращает появление растянутой области (из-за поворота перспективы), и поэтому похоже, что это только 2D (хотя на самом деле это не так). Чтобы преодолеть это, нам нужно поручить браузерам сохранить 3D-аспект преобразования. Это делается с помощью transform-style: preserve-3d.
  • когда мы сделаем выше, закрылки все откроются с 3D-эффектом, но ближе к началу анимации и ее концу, мы увидим мерцание на синем клапане когда переход фактически начинается и заканчивается для синего лоскута. Кажется, это потому, что z-index теряет эффект, когда используется 3D-преобразование, и между потерей z-index эффект и запуск preserve-3D эффект, во время которого синий клапан временно отстает. Чтобы решить эту проблему, 3D-эквивалент z-index: 1 (который, translateZ(1px)) добавляется. Translate in Z-axis приближает элемент на 1px к вашему глазу и держит его над Желтым и зеленым клапана.
  • наконец, несмотря на все вышесказанное, есть небольшой глюк в конце зависания анимации, где зеленый лоскут показывает через синий лоскут. Чтобы преодолеть это, я немного изменил время задержки.

(вопреки тому, что я изначально говорил,translateZ(0px) не требуется и может быть удален.)

#box {
  position: relative;
  top: 170px;
  left: 170px;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  perspective: 800px;
  transform-style: preserve-3d;
}
#flap1, #flap2, #flap3, #flap4 {
  position: absolute;
}
#flap1 {
  background-color: red;
  width: 150px;
  height: 300px;
  z-index: 1;
  transform: translateZ(1px);
  transform-origin: 0 0;
  transition: transform 1s 1.5s;
}
#flap2 {
  left: 150px;
  background-color: blue;
  width: 150px;
  height: 300px;
  z-index: 1;
  transform: translateZ(1px);
  transform-origin: 100% 0;
  transition: transform 1s ease 1s;
}
#flap3 {
  background-color: green;
  width: 300px;
  height: 150px;
  transform-origin: 0 0;
  transition: transform 1s ease 0.5s;
}
#flap4 {
  background-color: yellow;
  top: 150px;
  width: 300px;
  height: 150px;
  transform-origin: 0 100%;
  transition: transform 1s ease;
}
#box:hover #flap1 {
  transform: rotateY(-170deg) translateZ(1px);
  transition: transform 1s ease;
}
#box:hover #flap2 {
  transform: rotateY(170deg) translateZ(1px);
  transition: transform 1s ease 0.5s;
}
#box:hover #flap3 {
  transform: rotateX(170deg);
  transition: transform 1s ease 1s;
}
#box:hover #flap4 {
  transform: rotateX(-170deg);
  transition: transform 1s ease 1.5s;
}
<div id="box">
  <div id="flap1"></div>
  <div id="flap2"></div>
  <div id="flap3"></div>
  <div id="flap4"></div>
</div>
8