Перспектива CSS3 в 3D

У меня проблема со свойством 3D-перспективы CSS.

<figure>
    <img src="http://www.saintbioz.fr/wp-content/uploads/2010/02/paysage-montagneux.jpg" width="512" height="384" alt="Landscape" />
    <figcaption>Summer in the mountains</figcaption>
</figure>

Я просто хочу анимировать figcaption в :hover, чтобы выполнить эффект складывания (например, http://davidwalsh.name/demo/folding-animation.php) с -90deg до 0deg , учитывая, что -90deg представляет собой сглаживание блока (и поэтому не отображается)

/** vendor prefixes have been removed for better readability **/
figure {
    display: inline-block;
    position: relative;
    line-height: 0;
    perspective: 300px;
}
figcaption {
    background-color: rgba(0,0,0,0.2);
    padding: 20px 10px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    transition-property: all;
    transition-duration: 500ms;
    transform: rotateX(-123deg);
    transform-origin: top;
}
figure img:hover + figcaption {
    transform: rotateX(0deg);
}

Проблема в том, что перспектива не дает одинакового рендеринга для Chrome и Firefox. Мне пришлось вручную установить преобразование figcaption по умолчанию на rotateX(-123deg); в зависимости от значения перспективы, которое составляет 500 пикселей, и оно хорошо работает в Chrome, но не в Firefox.

Теоретически должно быть -90 градусов, когда не :hover, и 0 градусов, когда :hover, но кажется, что атрибут perspective изменяет длину поля глубины, поэтому -90 градусов больше не работает.

Интересно, как лучше всего играть с perspective и rotate, чтобы они хорошо работали во всех последних браузерах?

С наилучшими пожеланиями.

PS: просто скопируйте/вставьте HTML и CSS и попробуйте в Chrome и FF, вы сразу увидите, что не так ;)


css css-transitions css-transforms perspective
person jmpp    schedule 30.07.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

person JBENOIT    schedule 31.07.2012
comment
Здравствуйте, спасибо за ответ. Моя цель состоит в том, чтобы что-то работало должным образом в браузерах, способных работать с перспективой, независимо от других. - person jmpp; 31.07.2012

arrow_upward
1
arrow_downward

Вероятно, уже слишком поздно, чтобы этот ответ был полезен.

В любом случае, лучший способ сделать элемент невидимым — сохранить угол равным 90 градусов, но установить начало перспективы прямо над ним. (Не нужно вычислять точный угол, который даст желаемый эффект)

figure {
    display: inline-block;
    position: relative;
    line-height: 0;
    perspective: 300px;
    perspective-origin: top center;  /* added this setting */
}
figcaption {
    background-color: rgba(0,0,0,0.2);
    padding: 20px 10px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    transition-property: all;
    transition-duration: 2s;
    transform: rotateX(-90deg);
    transform-origin: top;
}
figure img:hover + figcaption {
    transform: rotateX(0deg);
}
<figure>
    <img src="http://www.saintbioz.fr/wp-content/uploads/2010/02/paysage-montagneux.jpg" width="512" height="384" alt="Landscape" />
    <figcaption>Summer in the mountains</figcaption>
</figure>

person vals    schedule 25.06.2015