flip effect работает на firefox, но не на chrome

Question

Я попытался сделать flip-эффект через css и html only.its, работающий отлично на Firefox, но не работающий на chrome. Я также попробовал префикс webkit, но не работал, может кто-нибудь мне помочь. его urgent.here код

.flip3D{ 
    width: 240px; 
    height: 200px; 
    margin: 10 px; 
    float: left; 
    } 
    .flip3D > .front{ 
    position: absolute; 
    -webkit-transform: perspective(600px) rotateY(0deg); 
    transform: perspective(600px) rotateY(0deg); 
    background-color: #D8D2D2; 
    width: 180px; 
    height: 200px; 
    border-radius: 7px; 
    color: black; 
    -webkit-backface-visibility:hidden; 
    backface-visibility:hidden; 
    transition: -webkit-transform 0.5s ;linear 0s; 
    transition: transform 0.5s ;linear 0s; 
    } 
    .flip3D > .back{ 
    position: absolute; 
    -webkit-transform: perspective(600px) rotateY(180deg); 
    transform:perspective(600px) rotateY(180deg); 
    background-color:#30D2FF; 
    width: 180px; 
    height: 200px; 
    border-radius: 7px; 
    color: white; 
    -webkit-backface-visibility:hidden; 
    backface-visibility:hidden; 
    transition: -webkit-transform 0.5s ;linear 0s; 
    transition: transform 0.5s ;linear 0s; 
    } 
    .flip3D:hover > .front{ 
    transform:perspective(600px) rotateY(-180deg); 
    } 
    .flip3D:hover > .back{ 
    transform:perspective(600px) rotateY(0deg); 
    } 

HTML код:

<div class="flip3D"> 
    <div class="back">box 1 back</div> 
    <div class="front">box 1 front</div>`` 
    </div> 

Answer 1

Вам нужно добавить префикс -webkit- ко всему. После добавления его в коде ниже, кажется, работает хорошо,

.flip3D:hover > .front{ 
    transform:perspective(600px) rotateY(-180deg); 
    -webkit-transform:perspective(600px) rotateY(-180deg); 
    } 
    .flip3D:hover > .back{ 
    transform:perspective(600px) rotateY(0deg); 
    -webkit-transform:perspective(600px) rotateY(0deg); 
    } 

JSFIDDLE

Примечание: Я перепутались один из стилей он теперь исправлена.

Answer 2

Вот ваш ответ мужчина. Добавить -webkit префикс в категорию transform. Вы пропустили это дважды в конце для этих стилей зависания. И проверьте скрипку для справки. JS FIDDLE DEMO

.flip3D:hover > .front{ 
    -webkit-transform:perspective(600px) rotateY(-180deg); 
} 
.flip3D:hover > .back{ 
    -webkit-transform:perspective(600px) rotateY(0deg); 
}