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

#css3

Есть два блока, наложенных друг на друга. один повернут на 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;
}

  
Я стою лицом
  
А я повернут





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

Ответы

Ответ 1

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

  

    

      Вход
    
    

      Выход
    
  



Ответ 2

С css не на "ты", но поигравшись на jsfiddle нашел такой результат ( на сколько я
понимаю, тот, который нужен)



.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 {
  transition-delay: 0.5s;
  transform: rotateY(0deg);
}
.folder:hover .first {
  transform: rotateY(-90deg);
}
.folder:not(:hover) .first {
  transition-delay: 0.5s;
}
.folder {
  display: block;
  position: relative;
  width: 120px;
  transition: 1s;
}

  
Я стою лицом
  
А я повернут



Ответ 3

Не совсем переворачивание, но выглядит правдоподобно.

По спецификации z-index анимируется.

Хм.. Я недооценил поддержку браузерами. Вполне работает... Впрочем, глючит.
Не работает только в Опере 12. В Хроме и FF z-index периодически переключается не одновременно
с переворотом, а вот в IE11, похоже, всё хорошо.



.folder {
  width: 90%;
  margin: auto;
  font-size: 4em;
  text-align: center;
  line-height: 2em;
  height: 2em;
  position: relative;
}

.folder > * {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: transform 3s linear, z-index 3s linear;
}

.first {
  background: silver;
  transform: scaleX(1);
  z-index: 1;
}

.second {
  background: antiquewhite;
  transform: scaleX(-1);
  z-index: -1;
}

.folder:hover > .first {
  z-index: -1;
  transform: scaleX(-1);
}

.folder:hover > .second {
  z-index: 1;
  transform: scaleX(1);
}

  
Я стою лицом
  
А я повёрнут



Ответ 4

Я делал нечто похожее, вот мой пример, если это вам подойдет:



.heroes {
    display: flex;
    flex-wrap: wrap;
        justify-content: center;
}
.flipc {
            perspective: 1000;
    display: inline-block;
    margin: 0 0.5em;
}
.flipc:hover .flipper {
    transform: rotateY(180deg);
}
.flipc, .front, .back {
    width: 8em;
    height: 12em;
}
.flipper {
    transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
}
.front, .back {
    backface-visibility: hidden;
    position: absolute;
}
.back {
     transform: rotateY(180deg);
}
.hex {
    display: inline-block;
    width: 8em;
    height: 12em;
    background: black;
    color: white;
}
.hex2 {
    display: inline-block;
    width: 8em;
    height: 12em;
    background: red;
    
    
}

    

        

            

                

                ляля
                
            
            

                

                не ляля