Все сервисы Хабра
Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
Закрыть
Задать вопрос
DTX
@DirecTwiX
"display: flex;" уже предлагали?
CSS
Вёрстка
Почему не работает backface-visibility:hidden?
codepen.io/DTX/pen/QNRoKw
Пытаюсь повторить
https://css-tricks.com/almanac/properties/b/backfa...
но что-то не выходит
Вопрос задан
более трёх лет назад
809 просмотров
Комментировать
Подписаться
1
Оценить
Комментировать
Facebook
Вконтакте
Twitter
Решения вопроса
1
Alex
@streetflush
Все работает.
Просто там на hover z-index меняется.... а у вас его вообще нет.
Ответ написан
более трёх лет назад
6
комментариев
Нравится
1
6
комментариев
Facebook
Вконтакте
Twitter
Alex
@streetflush
body {
background-color: #18A6A8;
}
.front{
background: hsl(120, 100%, 25%);
z-index:10;
animation: example 5s linear infinite;
backface-visibility:hidden
}
.back{
background: hsl(120, 50%, 25%);
animation: example1 5s linear infinite;
}
.card {
position: relative;
font-family: pfs-bold;
font-size: 40px;
height: 4em;
text-align: center;
width: 10em;
margin: 2em auto;
//background-color: whitesmoke;
& > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: white;
line-height: 4em;
text-align: center;
}
}
@keyframes example {
0% {transform: rotateY(0deg);}
50% {transform: rotateY(180deg); z-index:0;}
100% {transform: rotateY(0deg);}
}
@keyframes example1 {
0% {transform: rotateY(180deg);}
50% {transform: rotateY(0deg);}
100% {transform: rotateY(180deg);}
}
@font-face {
font-family: pfs-bold;
src: url('
https://s3-us-west-2.amazonaws.com/s.cdpn.io/14299...
');
}
Написано
более трёх лет назад
DTX
@DirecTwiX
Автор вопроса
z-index добавлять пробовал - ничего не меняется. front'у 10 ставил, на back тоже пробовал.
Написано
более трёх лет назад
Alex
@streetflush
DTX
: Выше работающий css
Написано
более трёх лет назад
DTX
@DirecTwiX
Автор вопроса
Alex
: z-index в keyframes роли не играет..
И если убрать background, то будет странная картина. С одной стороны нормально, а с другой видно все два текста.
Написано
более трёх лет назад
Alex
@streetflush
DTX
: В примере тоже если убрать фон то видно обратную сторону)))))
Написано
более трёх лет назад
Alex
@streetflush
DTX
:
в коде выше поменять и работать будет без фона
@keyframes example1 {
0% {transform: rotateY(180deg);backface-visibility:hidden;}
50% {transform: rotateY(0deg);backface-visibility:visible;}
100% {transform: rotateY(180deg);backface-visibility:hidden;}
}
Написано
более трёх лет назад
Пригласить эксперта
Ответы на вопрос
1
devstudent
@devstudent
frontend-developer
как раз -таки работает. попробуйте уберите . а чего вы хотите добиться в итоге ?
Ответ написан
более трёх лет назад
3
комментария
Нравится
3
комментария
Facebook
Вконтакте
Twitter
DTX
@DirecTwiX
Автор вопроса
На codepen работает?
На обратной стороне должно быть Back написано, а там tnorF.
Написано
более трёх лет назад
devstudent
@devstudent
DTX
: уберите это свойство и появится back
Написано
более трёх лет назад
DTX
@DirecTwiX
Автор вопроса
devstudent
: Так Front'а не должно быть видно на обратной стороне. Второй линк смотрели?
Написано
более трёх лет назад
Ваш ответ на вопрос
Войдите, чтобы написать ответ
Войти через центр авторизации
Похожие вопросы
CSS
+3 ещё
Средний
Яндекс Браузер на MacOS: как убрать или подвинуть иконку автозаполнения?
1 подписчик
6 часов назад
29 просмотров
0
ответов
JavaScript
+2 ещё
Средний
Есть для готовый плагин для проверки css-переменных со следующими фичами (см. описание)?
1 подписчик
23 часа назад
44 просмотра
0
ответов
CSS
Простой
Как выровнять крестик?
1 подписчик
вчера
100 просмотров
1
ответ
CSS
Простой
Как решить проблему с наложением в сафари?
2 подписчика
22 июл.
292 просмотра
1
ответ
CSS
Простой
Что поправить в градиенте?
1 подписчик
21 июл.
96 просмотров
0
ответов
HTML
+1 ещё
Простой
Как прижать нижние колонки к низу родительского блока?
4 подписчика
19 июл.
1957 просмотров
3
ответа
CSS
+2 ещё
Средний
Как создать фотогалерею с неявной сеткой в CSS?
1 подписчик
18 июл.
103 просмотра
2
ответа
CSS
Простой
Есть ли кроосбраузерный способ убрать абзац?
1 подписчик
18 июл.
117 просмотров
0
ответов
JavaScript
+1 ещё
Простой
Как сделать zoom в smartslider?
1 подписчик
16 июл.
52 просмотра
0
ответов
CSS
Простой
Как повторить фильтр с фигмы?
2 подписчика
15 июл.
1584 просмотра
0
ответов
Показать ещё
Загружается…
Вакансии с Хабр Карьеры
HTML-верстальщик (HTML/CSS/JavaScript)
CleanTalk
от 100 000 ₽
Разработчик Vue.js
Совкомбанк Технологии
•
Красноярск
Frontend-разработчик
Vortex
•
Москва
от 300 000 до 350 000 ₽
Минуточку внимания
Войдите на сайт
Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации
Закрыть
Реклама