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

Синтаксис

селектор {
	backface-visibility: hidden | visible;
}

Значения

Значение Описание
hidden Обратная сторона не будет видна.
visible Обратная сторона будет видна.

Значение по умолчанию: visible.

Примеры

Пример

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

p {
	-o-backface-visibility: visible;
	-ms-backface-visibility: visible;
	-moz-backface-visibility: visible;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	border: 3px solid black;
	width: 300px;
	height: 100px;
	-o-transition: transform 12s linear;
	-ms-transition: transform 12s linear;
	-moz-transition: transform 12s linear;
	-webkit-transition: transform 12s linear;
	transition: transform 12s linear;
}
p:hover {
	-o-transform: rotateY(3turn);
	-ms-transform: rotateY(3turn);
	-moz-transform: rotateY(3turn);
	-webkit-transform: rotateY(3turn);
	transform: rotateY(3turn);
}

Результат выполнения кода:

Привет, мир!

Пример

Сейчас к элементу применено backface-visibility: hidden. Наведите на него мышкой и вы увидите, что при повороте обратная сторона элемента будет не видна:

p {
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border: 3px solid black;
	width: 300px;
	height: 100px;
	-o-transition: transform 12s linear;
	-ms-transition: transform 12s linear;
	-moz-transition: transform 12s linear;
	-webkit-transition: transform 12s linear;
	transition: transform 12s linear;
}
p:hover {
	-o-transform: rotateY(3turn);
	-ms-transform: rotateY(3turn);
	-moz-transform: rotateY(3turn);
	-webkit-transform: rotateY(3turn);
	transform: rotateY(3turn);
}

Результат выполнения кода:

Привет, мир!