backface-visibilityВластивість відноситься до 3D - перетворення. За допомогою 3D-перетворень можна управляти обертанням елемента, щоб те, що ми вважаємо «фронтом» елемента, більше не було спрямоване на екран. Наприклад, це відкине елемент від екрану:
.flip ( transform: rotateY(180deg); )Це буде виглядати так, ніби ви взяли його шпателем і перевернули, як млинець. Це тому, що за замовчуванням для backface-visibilityє visible. Замість того, щоб це було видно, ви можете його приховати.
.flip ( transform: rotateY(180deg); backface-visibility: hidden; )Простий приклад:
Дивіться Pen FjwGA від Chris Coyier (@chriscoyier) на CodePen.
Це корисно при виконанні 3D-ефектів. Наприклад:
Працює належним чином
Спереду назадПроблема в WebKit, оскільки видимість задньої поверхні не прихована
Спереду назадЦе не проблематично у Firefox з будь-якої причини, хоча властивість працює однаково.
Префікси
Підтримка Firefox 10+ та IE 10+ backface-visibilityбез префіксу. Потрібні Opera (після Blink, 15+), Chrome, Safari, iOS та Android -webkit-backface-visibility.
Цінності
- видимий (за замовчуванням) - елемент завжди буде видимим, навіть якщо він не звернений до екрану.
- прихований - елемент не видно, якщо він не звернений до екрану.
- спадкувати - властивість will отримує своє значення від батьківського елемента.
- початковий - встановлює властивість за замовчуванням, яке є
visible.
Більше інформації
- 3D CSS тестер
- Специфікація
- Mozilla Docs
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |