Поворот блоков по оси Y при наведении

Есть два блока, наложенных друг на друга. один повернут на 90 град по оси Y то есть нам не виден, а другой повернут на 0 град, нужно чтобы при наведении, первый блок поворачивался на -90 град, то есть его поворот по оси Y становился 0, и второй блок так же разворачивался на -90, то есть его поворот по оси Y составлял -90 град, не пойму что не так но крутятся они оба друг против друга .first { display: block; position: relative; width: 120px; height: 100px; background: #C7FFA8; text-align: center; padding: 15px; } .second { display: block; position: absolute; width: 120px; height: 100px; background: #FCFFA8; text-align: center; padding: 15px; top: 0; } .folder .second { transform: rotateY(90deg); } .folder .second, .folder .first { transition: 1s; } .folder:hover .second { transform: rotateY(0deg); transition-delay: 0.5s; } .folder:hover .first { transform: rotateY(-90deg); } .folder { display: block; position: relative; width: 120px; transition: 1s; }

Я стою лицом

А я повернут

Как видно, желтый блок выезжает по часовой, а зеленый прячется против часовой, хотя должен делать это тоже по часовой, чтобы создавался эффект как будто поворачивается карточка

Ответ

figure.container { border: 3px solid hsla(16, 71%, 30%, 1); width: calc(20rem); min-height: calc(30rem); position: relative; margin: 0 auto; background: radial-gradient(ellipse at center, hsla(212, 67%, 36%, 0) 0%, hsla(212, 67%, 36%, 0.65) 15%, hsla(211, 67%, 39%, 1) 23%, hsla(207, 69%, 51%, 1) 58%, hsla(212, 67%, 37%, 1) 79%, hsla(212, 67%, 36%, 0.9) 81%, hsla(212, 67%, 36%, .6) 83%, hsla(212, 67%, 36%, .8) 100%); box-sizing: border-box; } div.film { border: 1px solid hsla(0, 0%, 80%, 1); position: absolute; width: calc(100%); height: calc(100%); text-shadow: 0px 0px 1px hsla(0, 0%, 0%, .4); text-align: center; perspective: 1000px; transform-style: preserve-3d; transition: 2s; } figure.container:hover div.film { transform: rotateY(-180deg); } div.face { position: absolute; backface-visibility: hidden; width: calc(100%); min-height: calc(100%); background-image: linear-gradient(to top, hsla(16, 71%, 10%, 1) 0%, hsla(16, 71%, 8%, 1) 100%); } div.back { transform: rotateY(-180deg); background-image: linear-gradient(to top, hsla(16, 71%, 10%, 1) 0%, hsla(16, 71%, 8%, 1) 100%); } figure.container div.front, figure.container div.back { font: normal 2rem/4.4 arial, sans-serif; letter-spacing: .1rem; color: hsla(0, 0%, 100%, 1); }

Вход

Выход