Свойство CSS backface-visibility

❮ Назад Полное руководство по CSS Далее ❯


Пример

Скрыть и показать обратную сторону двух повернутых элементов

:

#div1 {
 -webkit-backface-visibility: скрыто; /* Safari */
  backface-visibility: hidden;
}

#дел2 {
 -webkit-backface-visibility: visible; /* Safari */
  backface-visibility: visible;
}

Попробуйте сами »

Определение и использование

Свойство backface-visibility определяет, будет ли задняя поверхность элемента должен быть виден лицом к пользователю.

Задняя сторона элемента является зеркальным отражением лицевой стороны, отображается.

Это свойство полезно, когда элемент вращается. Он позволяет выбрать, будет ли пользователь должен видеть заднюю грань или нет.

Чтобы лучше понять это свойство, просмотреть демо.

Значение по умолчанию: видимый
По наследству: нет
Анимация: нет. Читать про анимированный
Версия: CSS3
Синтаксис JavaScript: объект .style.backfaceVisibility=»скрытый» Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Числа, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.

Собственность
вид сзади 36,0
12,0 -вебкит-		 10,0 16,0
10,0 -мунц-		 4. 0 -вебкит- 23,0
15,0 -вебкит-

Синтаксис CSS

backface-visibility: visible|hidden|initial|inherit;

Значения свойств

Значение Описание Демо
видимый Значение по умолчанию. Задняя сторона видна Играй »
скрытый Задняя сторона не видна
Играй »
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Ссылка HTML DOM: свойство backfaceVisibility

❮ Предыдущая Полное руководство по CSS Следующий ❯


НАБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
How To Tutorial
SQL Tutorial
Python Tutorial
W3.
CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

html — Основная магия -webkit-backface-visibility

Задавать вопрос

спросил

Изменено 3 года, 7 месяцев назад

Просмотрено 6к раз

Я хотел бы знать, почему webkit-backface-visibility похож на тот универсальный аспирин, который решает или усугубляет всевозможные разнородные проблемы, в основном связанные с артефактами и мерцанием.

Я прочитал и понял, для чего на самом деле backface-visibility : он контролирует, видны ли повернутые 3D-объекты, когда они не обращены к экрану.

Здесь есть хорошая, простая демонстрация

Но мне любопытно, почему каждый раз, когда у меня возникают странные глюки в мире CSS, совершенно не связаны с 3D-поворотами и их скрытыми обратными гранями , применение backface-visibility к проблемному слою или одному из его предков обычно помогает или делает дела обстоят хуже, но редко ничего не делает. Я говорю о таких вещах, как

  • Мерцающая анимация
  • Исправлены проблемы Z-Index слоев
  • Дисплей: нет <> видимое мерцание и артефакты
  • Мерцание при прокрутке

Интересно и всегда по моему скромному опыту, backface-visibility:hidden имеет тенденцию решать проблемы, связанные с фиксированным позиционированием, а backface-visibility:visible является «лучшим» для мерцания. Также интересно, что в Chrome и Safari побочные эффекты разные, но они есть!

Я работаю в Visual HTML Creator, поэтому ситуации, когда у меня мерцание/артефакты, довольно сложны (например, анимация на нескольких слоях, прокручиваемый div за фиксированными элементами, абсолютный над фиксированным с z-index .

… )

Кто-нибудь может меня просветить?

  • html
  • css
  • webkit
  • мерцание

1

Я не уверен, о какой магии вы говорите, но есть определенные случаи, когда свойство CSS backface-visibility может помочь продвигать элемент DOM на слой, чтобы браузер мог воспользоваться GPU при рендеринге этого элемента.

ПРИМЕЧАНИЕ : только скрытое значение будет продвигаться к слою, а не видимое .

Также есть случаи, когда это свойство может исправить неровные края вокруг элементов — все благодаря рендерингу

GPU .

Есть несколько других свойств CSS , которые делают то же самое, например, translateZ(0) или translate3d(0,0,0) . Все это хаки, и они будут заменены новым свойством CSS will-change 9.

No related posts.