CSS3: transform property not working as expected in chrome

问题

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);
}

回答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

回答2:

you are not doing it in the right way you have to use transform-style: preserve-3d on the parent element then you can transform the child. And since you are using 3d for a better performance you will need backface-visibility: hidden;

and you ve to use -webkit-transform-origin: 50% 100%; or just user prefixfree from LEA VEROU

http://leaverou.github.io/prefixfree/

parent:

 section#transform3d{
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;       
        }

child

#flyDiv {
    width:720px;
    height:420px;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-perspective: 300px;
    -moz-perspective: 300px;
    perspective: 300px;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    /*  -webkit-transition: -webkit-transform 10s; 
    -webkit-transform-origin: 50% 100%; */
    -webkit-transform: perspective(300px) rotateX(15deg);
    -moz-transform: perspective(300px) rotateX(15deg);
    transform: perspective(300px) rotateX(15deg);
}

demo : http://jsfiddle.net/kougiland/W9uPE/6/

read mor here : http://www.w3.org/TR/css3-transforms/

来源：https://stackoverflow.com/questions/18011727/css3-transform-property-not-working-as-expected-in-chrome

标签

jquery

css

css3

css-transforms