Свойство backface-visibility

Описание

Определяет, показывать обратную сторону элемента или нет. Как правило, обратная сторона становится видна при трансформации элемента, например, при его вращении относительно горизонтальной или вертикальной оси в трёхмерном пространстве. В обычной ситуации свойство backface-visibility не оказывает влияния на отображение элемента.

Синтаксис

backface-visibility: visible | hidden;
Значение Описание
visible Обратная сторона элемента будет видна и отображается через переднюю поверхность элемента зеркально.
hidden Обратная сторона будет не видна, скрываясь за передней поверхностью элемента.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style> 
.flip { 
perspective: 800px; 
} 
.card { 
position: relative; 
width: 300px; 
height: 200px; 
transition: transform 1.5s; 
transform-style: preserve-3d; 
} 
.card:hover { 
transform: rotateY(180deg); 
} 
.card-face { 
position: absolute; 
top: 0; 
bottom: 0; 
backface-visibility: hidden; 
} 
.card-face.back { 
font: 18px/1.6 Arial; 
padding: 20px; 
transform: rotateY(180deg); 
background: #000000; 
color: #fff; 
} 
.card img{ 
width: 300px; 
height: 200px; 
cursor: pointer; 
} 
</style> 
<figure class='flip'> 
<div class='card'> 
<img src='/files/images/regular/lion5.jpeg' alt='' class='card-face front'> 
<figcaption class='card-face back'> 
Львы любят отдыхать и бездельничать. Они проводят от 16 до 20 часов каждый день, отдыхая и во сне. 
</figcaption> 
</div> 
</figure>
</body>
</html>
Львы любят отдыхать и бездельничать. Они проводят от 16 до 20 часов каждый день, отдыхая и во сне.

Читайте также

Свойство padding-right

Устанавливает расстояние от внутреннего правого края рамки элемента до воображаемого прямоугольника.

Свойство all

Универсальное свойство, сбрасывает все значения свойств в исходные значения, исключением является...

Свойство text-shadow

Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно над...

Свойство font-grow

Задаёт направление основных осей в контейнере. Определяет положение флексов в контейнере. На напр...

Свойство justify-content

Определяет, как браузер распределяет пространство вокруг флекс - элементов вдоль главной оси конт...