Как исправить перекосы, кадрирование CSS3: навести переход свойства transform в Chrome? Работает во всех других браузерах

Question

Вот JSFiddle of the issue

Вот мой HTML:

<div class="shot"> 

</div> 

А вот CSS:

.body { 
    background-color: #ecf1ff; } 

.shot { 
    position: relative; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    width: 400px; 
    height: 300px; 
    background-color: #ff8346; 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; } 


.shot:hover { 
    -webkit-transform: perspective(600px) rotateX(45deg); 
    -moz-transform: perspective(600px) rotateX(45deg); 
    -o-transform: perspective(600px) rotateX(45deg); 
    -ms-transform: perspective(600px) rotateX(45deg); 
    transform: perspective(600px) rotateX(45deg); 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; } 

Это отлично работает в Firefox, Safari и IE .. В Chrome кажется, что сначала «сквозит» прямоугольник вниз, а затем применяет перспективу в последнем кадре. Это не соответствует правильной перспективе. Это известная проблема или это то, что я делаю неправильно?

Answer 1

Просто добавьте перспективу также к базовому (неповрежденному) элементу.

corrected fiddle

Добавлено CSS:

.shot { 
    -webkit-transform: perspective(600px); 
} 

Проблема заключается в том, что перспектива в базовом элементе не определен; разные браузеры могут обрабатывать это по-разному.