Все сервисы Хабра
Сообщество 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
Простой
Как выровнять крестик?
1 подписчик
9 часов назад
64 просмотра
1
ответ
CSS
Простой
Как решить проблему с наложением в сафари?
2 подписчика
вчера
283 просмотра
1
ответ
CSS
Простой
Что поправить в градиенте?
1 подписчик
21 июл.
93 просмотра
0
ответов
HTML
+1 ещё
Простой
Как прижать нижние колонки к низу родительского блока?
4 подписчика
19 июл.
1862 просмотра
3
ответа
CSS
+2 ещё
Средний
Как создать фотогалерею с неявной сеткой в CSS?
1 подписчик
18 июл.
100 просмотров
2
ответа
CSS
Простой
Есть ли кроосбраузерный способ убрать абзац?
1 подписчик
18 июл.
106 просмотров
0
ответов
JavaScript
+1 ещё
Простой
Как сделать zoom в smartslider?
1 подписчик
16 июл.
44 просмотра
0
ответов
CSS
Простой
Как повторить фильтр с фигмы?
2 подписчика
15 июл.
1572 просмотра
0
ответов
HTML
+1 ещё
Простой
Как лучше всего реализовать данный фон?
1 подписчик
14 июл.
191 просмотр
2
ответа
JavaScript
+1 ещё
Простой
Как сделать, чтобы свойства класса прописывались не DOM-узлу, а классу, создаваемому в JS?
1 подписчик
14 июл.
144 просмотра
2
ответа
Показать ещё
Загружается…
Вакансии с Хабр Карьеры
HTML-верстальщик (HTML/CSS/JavaScript)
CleanTalk
от 100 000 ₽
Разработчик Vue.js
Совкомбанк Технологии
•
Красноярск
Frontend-разработчик
Vortex
•
Москва
от 300 000 до 350 000 ₽
Минуточку внимания
Войдите на сайт
Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации
Закрыть
Реклама