Свойство backface-visibility
Свойство backface-visibility определяет, видно ли заднюю грань элемента, когда он повернут к пользователю. Применяется при работе с трансформацией, например при создании вращающихся 3D карточек, где при вращении нужно чтобы пользователь видел только одну грань карточки.
backface-visibility: hidden;Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
backface-visibility: visible;
Пользователь видит все грани элемента, даже если повернут задней гранью к пользователю. Попробуйте вращать элемент .scene-1-inner и вы всегда будете видеть переднюю и заднюю части карточки.
<div class="scene-1">
<div class="scene-1-inner">
<div class="scene-1-front">front</div>
<div class="scene-1-back">back</div>
</div>
</div>
<style>
.scene-1 {
width: 200px;
height: 200px;
perspective: 500px;
}
.scene-1-inner {
width: 100%;
height: 100%;
border: 1px solid red;
transform: rotateY(0deg);
transition: transform .1s linear;
transform-style: preserve-3d;
}
.scene-1-front,
.scene-1-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: visible;
font-size: 45px;
text-align: center;
}
.scene-1-back {
transform: rotateY(180deg);
}
</style>front
back
backface-visibility: hidden;
Пользователь не видит все грани элемента. Если элемент повернут к пользователю своей задней гранью, то он будет скрыт. Попробуйте вращать элемент .scene-2-inner и вы будете видеть только одну грань карточки, которая будет повернута "лицом" к пользователю.
<div class="scene-2">
<div class="scene-2-inner">
<div class="scene-2-front">front</div>
<div class="scene-2-back">back</div>
</div>
</div>
<style>
.scene-2 {
width: 200px;
height: 200px;
perspective: 500px;
}
.scene-2-inner {
width: 100%;
height: 100%;
border: 1px solid red;
transform: rotateY(0deg);
transition: transform .1s linear;
transform-style: preserve-3d;
}
.scene-2-front,
.scene-2-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
font-size: 45px;
text-align: center;
}
.scene-2-back {
transform: rotateY(180deg);
}
</style>front
back