CSS Hover on Elements with Transformation [Ошибка Chrome/Webkit]

Question

У меня есть div, с которым я применяю преобразование с помощью CSS. Фактическое преобразование заключается в следующем:

.trans{ 
    transform-origin: right center; 
    transform: perspective(600px) rotateY(-30deg) translateZ(1px); 
    -webkit-transform-origin: right center; 
    -webkit-transform: perspective(600px) rotateY(-30deg) translateZ(150px); 
} 

проблема, насколько я смог выяснить, что это поворачивает DIV «за» страницы в глубину. Он отображается правильно, но не кажется, что он правильно взаимодействует с мышью. Поэтому мой класс CSS для состояния зависания вообще не работает с этими элементами.

Вы можете проверить reduced testcase. В области результатов обратите внимание, что квадрат слева не корректно меняет цвета фона, но квадрат справа. Эта ошибка происходит в Chrome, но не в Firefox или IE, когда я тестировал.

Любые хорошие идеи о том, как исправить это?

Answer 1

Вы должны объявить display property for .trans класс для его работы. Это оно.

Вот Working Solution.

HTML-:

<div class="square trans"> 
    <p>Text Here!</p> 
</div> 
<div class="square"> 
    <p>Text Here!</p> 
</div> 

CSS-:

.square{ 
    background-color: #ffffff; 
    border-radius: 4px; 
    border-color: #222222; 
    border width: 6px; 
    border-style: dotted; 
    display:inline-block; 
    float:left; 
} 

.trans{ 
    transform-origin: right center; 
    transform: perspective(600px) rotateY(-30deg); 
    -webkit-transform-origin: right center; 
    -webkit-transform: perspective(600px) rotateY(-30deg); 
    display:table-cell; 

} 

/* Doesn't work on transformed square! */ 
.square:hover{ 
    background-color: #ff0000; 
} 

Надеется, что это помогает.