1

Имеется блок, по наведении на него он переворачивается на 180 градусов, на нем так же есть текст. После переворота текст так же отображается(перевернутым), а хотелось бы, чтобы он оставался как-бы на задней стороне. Я думал использовать x-index: -1, но похоже, что он работает только когда элементы неподвижны.

div {   
  height: 200px;
  width: 200px;
  transition: transform 0.4s;                                 
}
div > div {
  background: linear-gradient(yellow, deepskyblue);
  border-radius: 10px;
}
div:hover > div {
  transform: rotateY(180deg);                               
}
<DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>        
    <div>
      <div>
        <p> abacaba </p>
      </div>
    </div>
  </body>        
</html>

2
  • После переворота, где должна быть надпись? Слева оставаться или справа? Commented 13 мар. 2016 в 20:50
  • @ВалерийЕмельянов исчезнуть после того, как блок пройдет 90 градусов, как будто это бумага, и надпись есть на одной стороне
    – Юрий
    Commented 13 мар. 2016 в 20:52

1 ответ 1

1

На сколько я понял, Вы хотите сделать так:

  <DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>        
    <div>  <p> abacaba </p>
      <div>
      </div>
    </div>
  </body>        
</html>



      div {   
  height: 200px;
  width: 200px;z-index:1000;
  transition: transform 0.4s;                                 
}
div > div {
  background: linear-gradient(yellow, deepskyblue);
  border-radius: 10px;

}

div > div:hover {
  background: linear-gradient(yellow, deepskyblue);
  border-radius: 10px;z-index:1000; 
  d
}

div:hover {
  transform: rotateY(180deg);}

p { 
  position: absolute;
    z-index: 0; 
    margin: 0;
wi}

div:hover p{
  position: absolute;
    z-index: -1; 
    margin-left: 75px;}
4
  • Запустил сейчас ваш код и пригляделся более внимательно: надпись пропадает, как только мышка навелась на блок, а должна либо пропадать, а потом исчезать(когда блок повернется другой стороной), либо наоборот.
    – Юрий
    Commented 13 мар. 2016 в 22:56
  • То есть нужно, что бы когда наводишь мышкой на блок - надпись пропала, а когда убираешь курсор с блока - блок поворачивается на исходную позицию но уже без надписи? Commented 13 мар. 2016 в 23:01
  • Надпись сначала есть на блоке, затем, когда мышка наводится на него, он начинает поворачиваться, и когда повернется на 90 градусов, он будет, соответственно, невидим(повернут ребром), и после того, как он продолжит поворачиваться, пользователю видна уже другая его сторона, а надпись находится на обратной, поэтому, дальше она не видна. Проще всего это представлять как лист бумаги с надписью: сначала она видна, но если поворачивать его на 180 градусов, то начиная с середины поворота она будет не видна.
    – Юрий
    Commented 13 мар. 2016 в 23:56
  • Я изменил свой ответ, попробуйте. Боюсь, при помощи CSS это максимум что можно сделать. Для более лучшего варианты, скорее всего нужно использовать скрипты. Commented 14 мар. 2016 в 10:04

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.