Как создать 3D-перспективу с помощью CSS3?

Question

Я пытаюсь создать трехмерную перспективу анимации для флип-карты для проекта, над которым я работал. К сожалению, моя анимация не выглядит полностью 3D.

Я использовал этот guide. В первом примере человеку удалось сделать его похожим на фоновый фон Windows. Однако, когда я попытался использовать тот же код на JSFiddle, результат был не таким, как у него.

Его демо-код сделал эффект ниже. Когда карта была перевернуть это вызывает с одной стороны, чтобы получить меньше, создавая впечатление перспективы:

На моем JSFiddle используя свой код (за исключением другого фона), стороны по всей видимости, остаются теми же размер все время:

Может кто-нибудь объяснить мне, что я пропустил, или как получить тот же эффект перспективы, который он имел на своем веб-сайте? Заранее спасибо.

Его HTML код:

<div id="f1_container"> 
<div id="f1_card" class="shadow"> 
    <div class="front face"> 
    <img src="/images/Windows%20Logo.jpg"/> 
    </div> 
    <div class="back face center"> 
    <p>This is nice for exposing more information about an image.</p> 
    <p>Any content can go here.</p> 
    </div> 
</div> 
</div> 

Его CSS код:

#f1_container { 
    position: relative; 
    margin: 10px auto; 
    width: 450px; 
    height: 281px; 
    z-index: 1; 
} 
#f1_container { 
    perspective: 1000; 
} 
#f1_card { 
    width: 100%; 
    height: 100%; 
    transform-style: preserve-3d; 
    transition: all 1.0s linear; 
} 
#f1_container:hover #f1_card { 
    transform: rotateY(180deg); 
    box-shadow: -5px 5px 5px #aaa; 
} 
.face { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 
} 
.face.back { 
    display: block; 
    transform: rotateY(180deg); 
    box-sizing: border-box; 
    padding: 10px; 
    color: white; 
    text-align: center; 
    background-color: #aaa; 
} 

Answer 1

Смотрите, где он говорит, что он лишен префиксы поставщика из его CSS, чтобы держать вещи в чистоте? Я уверен, это твоя проблема. Некоторые из этих свойств CSS не являются полностью стандартными, но реализованы в разных браузерах с различными префиксами поставщиков. Я действительно не уверен, какие из них, но Google может помочь с этим.

Редактировать: Хмм. В любом случае, CSS является виновником, но на самом деле я не вижу много префиксов поставщиков. Я снял свой фактический CSS с страницы и вставил его вместо «чистого» CSS, который вы использовали, что заставляет скрипку работать. Его реальный CSS является:

#f1_container { 
    height: 281px; 
    margin: 10px auto; 
    position: relative; 
    width: 450px; 
    z-index: 1; 
} 
#f1_container { 
    perspective: 1000px; 
} 
#f1_card { 
    height: 100%; 
    transform-style: preserve-3d; 
    transition: all 1s linear 0s; 
    width: 100%; 
} 
#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card { 
    box-shadow: -5px 5px 5px #AAAAAA; 
    transform: rotateY(180deg); 
} 
.face { 
    backface-visibility: hidden; 
    height: 100%; 
    position: absolute; 
    width: 100%; 
} 
.face.back { 
    -moz-box-sizing: border-box; 
    background-color: #AAAAAA; 
    color: #FFFFFF; 
    display: block; 
    padding: 10px; 
    text-align: center; 
    transform: rotateY(180deg); 
} 

Answer 2

Они были некоторые CSS неправильно ... в примере, он имел класс .back.face, который должен был быть .face.back (не то, почему она не работает, как было указано просто очистил его. вверх). Другие проблемы были виновниками, как отмечали другие плакаты. Я создал новый jsFiddle. Я бы включил плагин jQuery flip над этим, поскольку IE будет испытывать трудности с таким эффектом.

http://jsfiddle.net/JJrHD/1/