Все сервисы Хабра
Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
Закрыть
Задать вопрос
DTX
@DirecTwiX
"display: flex;" уже предлагали?
CSS
Вёрстка
Почему не работает backface-visibility:hidden?
codepen.io/DTX/pen/QNRoKw
Пытаюсь повторить
https://css-tricks.com/almanac/properties/b/backfa...
но что-то не выходит
Вопрос задан
более трёх лет назад
805 просмотров
Комментировать
Подписаться
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
Простой
Как добавить прозрачность для sph в imgenx?
1 подписчик
вчера
24 просмотра
0
ответов
Вёрстка
Простой
Шрифт подключается криво, почему?
1 подписчик
вчера
51 просмотр
1
ответ
CSS
+1 ещё
Простой
Как сделать так, чтобы карточка была по размеру контента, если его немного?
1 подписчик
13 мар.
93 просмотра
1
ответ
JavaScript
+1 ещё
Простой
Есть ли на сегодня какое-нибудь решение выделить инпут по focus-visible?
1 подписчик
13 мар.
78 просмотров
1
ответ
JavaScript
+2 ещё
Простой
Как сделать так, что бы используя live server у меня не браузер открывался, а справа от самого кода открывалось окно со всем этим?
1 подписчик
13 мар.
113 просмотров
0
ответов
JavaScript
+1 ещё
Простой
Как получить такой эффект на мобильном?
1 подписчик
12 мар.
210 просмотров
0
ответов
HTML
+1 ещё
Простой
Как сверстать данную часть header?
1 подписчик
12 мар.
116 просмотров
0
ответов
HTML
+1 ещё
Простой
Как сделать что бы в меню были вертикальные полосы на всю высоту?
2 подписчика
11 мар.
194 просмотра
2
ответа
HTML
+1 ещё
Простой
Как лучше реализовать данный блок?
1 подписчик
11 мар.
96 просмотров
2
ответа
JavaScript
+1 ещё
Простой
Как скрыть/показать элемент с определенным текстом?
2 подписчика
10 мар.
878 просмотров
2
ответа
Показать ещё
Загружается…
Вакансии с Хабр Карьеры
Специалист технической поддержки ИТ продукта
inSales
от 60 000 ₽
Фронтенд разработчик Middle
Astra Health Tech
•
Москва
от 200 000 до 250 000 ₽
Senior Frontend (JavaScript) разработчик
Vital Partners
от 350 000 до 420 000 ₽
Минуточку внимания
Войдите на сайт
Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации
Закрыть
Реклама