Свойство 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='https://mfs.gki-webik.ru/s?path=/images/regular/lion5.jpeg' alt='' class='card-face front'> 
<figcaption class='card-face back'> 
Львы любят отдыхать и бездельничать. Они проводят от 16 до 20 часов каждый день, отдыхая и во сне. 
</figcaption> 
</div> 
</figure>
</body>
</html>

Описание

Синтаксис

Подробности

Пример

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

Стиль непосещенных ссылок

Стиль пройденного проверку поля формы

Свойство pointer-events

Универсальный селектор