CSS задействане на курсора на мишката повече от веднъж с webkit 3d transform

Когато използвам 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/


css hover transform webkit-transform
person Andre Fuentes    schedule 14.01.2014    source източник
comment
Струва ми се добре, може ли по-конкретно какъв е проблемът?   -  person Josh Powell    schedule 14.01.2014
comment
В chrome 32 долната половина работи на 100%, а горната е бъгава.   -  person Ashley Medway    schedule 14.01.2014
comment
Изглежда добре за мен във V.31   -  person Paulie_D    schedule 14.01.2014
comment
при мен работи на win8 - 31.0.1650.63   -  person denolk    schedule 14.01.2014
comment
@JoshPowell, когато поставя мишката върху горните 50% от div.hoverArea, 3d ефектът е хубав, но когато преместя мишката върху долните 50% от div.hoverArea, той продължава да се върти като луд   -  person Andre Fuentes    schedule 14.01.2014
comment
Ааа, добре, добре, разбирам какво имаш предвид.   -  person Josh Powell    schedule 14.01.2014
comment
@Paulie_D, моля, опитайте се да поставите мишката си в горната част на div и бавно да я придвижите до дъното. Работи ли?   -  person Andre Fuentes    schedule 14.01.2014
comment
@Андре Фуентес изглежда е така. Какво е очакваното поведение, което не се случва?   -  person Paulie_D    schedule 14.01.2014

Отговори (1)


arrow_upward
5
arrow_downward

Можете да го поправите, като премахнете елемента .hoverArea и вместо това приложите събитието :hover към елемента .flip.

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

Демо

Ако все още искате да използвате елемента .hoverArea, можете да използвате transform:translateZ(1px); върху .hoverArea, за да функционира правилно. Това кара браузъра да изобразява елемента по-внимателно

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

Демо

person Zach Saucier    schedule 14.01.2014
comment
Ти си една минута по-бърз от мен. наздраве - person FreshPro; 14.01.2014
comment
Работи добре, благодаря! Мислех, че поведението при задържане ще се обърка, ако се трансформирам в 3d, затова използвах друг елемент за него - person Andre Fuentes; 14.01.2014
comment
@AndreFuentes Също така добави алтернатива, която позволява използването на .hoverArea за работа в случай, че искате да покрива повече площ от .flip - person Zach Saucier; 14.01.2014