CSS3 Card Flip backface исчезает в конце преобразования

У меня есть простой набор карточек, которые нужно переворачивать одним щелчком мыши. Проблема в том, что когда преобразование выполнено, обратная сторона (синяя сторона) исчезает. Это как бы появляется во время анимации на лицевой стороне.

Я знаю, что это, вероятно, простое решение и что-то простое, но, возможно, это не так. Я могу воспроизвести результаты в Chrome (Canary) и Safari.

Я пробовал некоторые вещи с обратной видимостью, которые позволяют ему не исчезать, но затем я могу щелкнуть его с помощью слушателя jQuery и вернуть его на передний план.

Вот скрипка: http://jsfiddle.net/9gPfz/1/

Вот код CSS: `.equipment-card-holder {-webkit -pective: 1000; }

.equipment-card {высота: 250 пикселей; ширина: 222 пикс; фон: #fff; box-shadow: 0 1px 5px rgba (0,0,0,0.9); плыть налево; маржа: 0 9px 30px;

-webkit-transform-style: preserve-3d;


-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out; 
}

.equipment-card .card-face{
    -webkit-backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    }

.equipment-card .card-front{
    -webkit-transform: rotateY(0deg);
    }

.equipment-card .card-back{
    -webkit-transform: rotateY(180deg);
    background-color: lightBlue;
    }

.equipment-card.flipped{
    -webkit-transform: rotateY(180deg);
    box-shadow: 0 15px 50px rgba(0,0,0,0.2);

    }

.span12{

width: 960px;
}
}`

Вам понадобится браузер на основе webkit для префиксов поставщиков, которые я использую.


css css-transitions css-transforms
person Fernker    schedule 09.04.2013    source источник

Ответы (2)


arrow_upward
21
arrow_downward

Итак, я понял проблему, и да, это было просто. Проблема в том, что у меня был установлен цвет фона на карточке (а не на обеих сторонах карточки). Я надеюсь, что этот ответ окажется полезным для кого-то в будущем, кто может гуглить эту проблему.

Изменить: более точный ответ

css: 8 удалить фон карты

background: #fff;

И просто наложи фон на лицо

Можно проверить обновление той же скрипки http://jsfiddle.net/9gPfz/2/

person Fernker    schedule 09.04.2013
comment
Спасибо за это. Немного нелогично, но это имеет смысл. - person jd.; 07.09.2014
comment
Я пробовал СТОЛЬКО вещей, чтобы исправить эту проблему, и ваш ответ был уловкой! Спасибо много!! - person Sators; 13.03.2015
comment
Большое спасибо за это! - person Jithin Nair; 15.06.2017
comment
Дох .. Как я это не пробовал. Большое спасибо. - person Josh; 05.03.2020

arrow_upward
2
arrow_downward

Я делал то же самое, но принятый ответ у меня не сработал. Поэтому я попробовал другие хаки.

Что происходит, так это то, что фон «обратного» класса каким-то образом перекрывается фоном «перевернутого» класса.

Это можно исправить, добавив background: transparent; в перевернутый класс.

Имейте в виду, что это не идеальное решение. Просто обходной путь.

.equipment-card.flipped{
    -webkit-transform: rotateY(180deg);
    box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    background: transparent;
}

Ознакомьтесь с обновленной скрипкой здесь: http://jsfiddle.net/9gPfz/28/

person Deepank    schedule 19.03.2017