Руководство по CSS

CSS @ правила (RULES)

Полный список свойств CSS

Свойство background CSS Свойство animation-timing-function CSS3

Метод использования и примеры свойства backface-visibility CSS3

Атрибут backface-visibility CSS3 определяет, виден ли "背面" преобразованного элемента, когда он направлен к пользователю.

В таблице ниже总结了 контекст использования и историю версий этого свойства.

Значение по умолчанию:	visible
Подходит для:	Деформируемые элементы
Ингерит:	Нет
Анимировано:	Нет.См. также Анимационные свойства.
Версия:	Новая функция CSS3
JavaScript-синтаксис:	object.style.backfaceVisibility="hidden"

Синтаксис использования backface-visibility

Синтаксис этого свойства такой:

backface-visibility: visible | hidden | initial | inherit

Ниже приведен пример того, как использовать атрибут backface-visibility.

Пример

.flip-container {
　　　　　　　　margin: 50px;
　　　　　　　　perspective: 1000px;
　　　　　　　　display: inline-block;
　　　　}
　　　　.flip-container:hover .card {
　　　　　　　　transform: rotateY(180deg);
　　　　}
　　　　.card, .front, .back {
　　　　　　　　width: 130px;
　　　　　　　　height: 195px;
　　　　}
　　　　.card {
　　　　　　　　position: relative;
　　　　　　　　transition: 0.5s all;
　　　　　　　　transform-style: preserve-3d;
　　　　}
　　　　.front, .back {
　　　　　　　　position: absolute;
　　　　　　　　backface-visibility: hidden;
　　　　}
　　　　.front {
　　　　　　　　z-index: 1;
　　　　　　　　transform: rotateY(180deg);
　　　　}
　　　　.back {
　　　　　　　　z-index: 2;
　　　　　　　　transform: rotateY(0deg);
　　　　}

Тестировать, посмотреть <br/>

Примечание:Свойство backface-visibility очень полезно для создания анимаций, таких как вращение монеты или перевернутая карта, где два разных изображения (т.е. передняя и задняя стороны) комбинируются для создания лучшего эффекта 3D-вращения.

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

В таблице ниже описаны значения этого свойства.

Значение	Описание
visible	Указать, что задняя сторона видна, разрешить отображение передней стороны в зеркальном изображении. Это значение по умолчанию.
hidden	Указать, что задняя сторона не видна, спрятать переднюю.
initial	Установить этот атрибут в его значение по умолчанию.
inherit	Если указано, то связанные элементы принимают значение свойства backface-visibility родительского элемента.

Совместимость с браузерами

Свойство backface-visibility поддерживается всеми主流ыми браузерами.

	Firefox 10+ ^-moz-, 16 + Google Chrome 12+ ^-webkit-, 36+ Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 15+ ^-o-, 23+ ^-webkit-

Дополнительное чтение

См. также следующие руководства:CSS3 транзитивы,CSS3 3D-трансформации,CSS3 анимация.

См. также свойства:perspective,perspective-origin,transform,transform-origin,transform-style,transition.

Свойство background CSS Свойство animation-timing-function CSS3