jquery - CSS3: transform property not working as expected in chrome

Question

I am trying to achieve the below thing ..And its working pretty well in firefox but the same css

working in chrome is somewhat like this shown below

I think -webkit-transform-origin: 50% 100%; doesnt work in chrome or its working but not as expected

Demo Jsfiddle

#flyDiv {
    width:720px;
    height:420px;
    transform-origin: 50% 100%;
    perspective: 300;
    transform: perspective(300px) rotateX(15deg);
    -webkit-transform: perspective(300px) rotateX(15deg);
}

Answer 1

Probably I have found an error ..This is hardware issue I have checked in many computers and found that pc in which their are graphic cards present they are the one who can run them smoothly as they are hardware accelerated ..Otherwise the slantness differs bcoz its software accelerated..

just check ur pc config by chrome://gpu in address bar and u will find the diff

Following image is that in which its running fine...

Following image is that in which its not running as expected...

Anyways Thanks for your answers and comments ..One favour plz confirm me this by checking if possible ..Thanks