Mixin vendor de SISASS para la propiedad backface-visibility.
Controla si la cara trasera de un elemento transformado en 3D permanece visible cuando queda orientada hacia el usuario. Se usa sobre todo en giros con rotateY, rotateX o composiciones tipo card flip para evitar que el reverso se vea invertido cuando no corresponde.
@mixin backface-visibility($br: hidden);| Parámetro | Tipo | Default | Descripción |
|---|---|---|---|
| br | Keyword | hidden | Define el valor que se asignará a backface-visibility. |
En este ejemplo, ambas tarjetas giran 180 grados al pasar el cursor. La primera usa hidden, por lo que la cara trasera no se muestra mientras queda invertida. La segunda usa visible, así que el reverso sigue siendo visible durante el giro.
<div class="backface_visibility_example">
<div class="card_wrapper">
<h3 class="subtitle">hidden</h3>
<div class="card_scene"><div class="card hidden_face"><div class="face front">Front</div><div class="face back">Back</div></div></div>
</div>
<div class="card_wrapper">
<h3 class="subtitle">visible</h3>
<div class="card_scene"><div class="card visible_face"><div class="face front">Front</div><div class="face back">Back</div></div></div>
</div>
</div>