CSS парил несколько раз с помощью webkit 3d transform

Question

Когда я использую 3D-преобразование webkit при наведении, работают только верхние 50% области наведения, а нижние 50% нестабильны. В настоящее время я тестирую на Chrome (31.0.1650.63). Это ошибка? Есть ли обходной путь?

Попробуйте навести курсор мыши на верхнюю часть div и медленно подвести его к нижней части.

HTML

<div class="hoverArea"></div>
<div class="flip">
    <div class="front">front</div>
    <div class="back">back</div>
</div>

CSS

.hoverArea, .flip, .front, .back {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}
.hoverArea {
  z-index: 10;
}
.flip {
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  -webkit-perspective: 800;
  z-index: 9;
}
.front {
  background-color: #f00;
  -webkit-backface-visibility: hidden ;
}
.back {
  background-color: #f0f;
  -webkit-transform: rotatex(-180deg);
  -webkit-backface-visibility: hidden ;
}
.hoverArea:hover + .flip {
  -webkit-transform: rotatex(-180deg);  
}

http://jsfiddle.net/4P53y/

Answer 1

Вы можете исправить это, удалив .hoverArea элемент и вместо этого применить :hover событие на .flip элемент.

.flip:hover {
    -webkit-transform: rotatex(-180deg);    
}

демонстрация

Если вы хотите все еще использовать .hoverArea элемент, то вы можете использовать transform:translateZ(1px); на .hoverArea чтобы он функционировал правильно. Это заставляет браузер рендерить элемент более тщательно

.hoverArea {
    z-index: 10;
    -webkit-transform:translateZ(1px);
}

демонстрация