backface-visibilityИмовина се односи на 3Д трансформације. Помоћу 3Д трансформација можете успети да ротирате елемент тако да оно што ми сматрамо „предњом страном“ елемента више није окренуто према екрану. На пример, ово би одбацило елемент са екрана:
.flip ( transform: rotateY(180deg); )Изгледаће као да сте га узели лопатицом и преврнули попут палачинке. То је зато што је подразумевани backface-visibilityје visible. Уместо да буде видљиво, могли бисте то сакрити.
.flip ( transform: rotateY(180deg); backface-visibility: hidden; )Једноставан пример:
Погледајте Пен ФјвГА Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.
Ово је корисно када се раде 3Д ефекти. На пример:
Ради исправно
Фронт БацкПроблематично у ВебКит-у јер видљивост позадине није скривена
Фронт БацкОво из било ког разлога у Фирефоку није проблематично, иако својство функционише на исти начин.
Префикси
Подршка backface-visibilityза Фирефок 10+ и ИЕ 10+ без префикса. Потребни су Опера (пост Блинк, 15+), Цхроме, Сафари, иОС и Андроид -webkit-backface-visibility.
Вредности
- видљив (подразумевано) - елемент ће увек бити видљив чак и када није окренут ка екрану.
- скривен - елемент није видљив када није окренут ка екрану.
- наследити - својство вилл добија вредност из надређеног елемента.
- почетно - поставља својство на подразумевано, што је
visible.
Више информација
- 3Д ЦСС Тестер
- Спец
- Мозилла Доцс
Подршка прегледача
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |