Показать сообщение отдельно
  #3 (permalink)  
Старый 27.09.2015, 19:45
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Если щёлкнуть или коснуться элемент получает фокус.
Это можно тоже исползват в данном случае.
<style>

.one-post {
  position: relative;
  width: 24%;
  height: 100px;
  perspective: 1000px;
 }

 .one-post .side1 {
  color: #343434;
  background: #ffeeff;
  transform-origin: 50% 50% 0;
  transition: all 0.35s ease-in-out 0s;
}

.one-post .side2 {
  position: absolute;
  width: 100%;
  left: 0px;
  top: 0px;
  opacity: 0;
  visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(-90deg);
  color: #343434;
  background: #eeeeff;
  transition: none;
 }

 .one-post:focus .side1 {
  transform: rotateY(90deg);
}

.one-post:focus .side2 {
  opacity: 1;
  visibility: visible;
  transform: rotateY(0deg);
  transition: all 0.35s ease 0.35s;
}

</style>


<div class="one-post" tabindex="0">
    <div class="side1">bla bla bla</div>
    <div class="side2">oops oops oops</div>
</div>
<div class="one-post" tabindex="0">
    <div class="side1">bla bla bla</div>
    <div class="side2">oops oops oops</div>
</div>
Ответить с цитированием