transform-style (_base.scscs)

Tipo: Mixin

Versión: 1.1.13

Clase vendor existente dentro de SISASS para la propiedad transform style

La propiedad transform-style es una propiedad de CSS que establece si el elemento hijo está posicionado en el espacio tridimensional (preserve-3d) o si se integra en el plano del elemento padre (flat). De esta manera, podemos controlar cómo se comportan los elementos hijos en relación con el elemento padre cuando se aplican transformaciones tridimensionales.

Interface

@mixin transform-style($br: none);

br: Valor a asignar a la propiedad

Propiedad transform-style con preserve-3d

Ejemplo 1: SCSS

Ejemplo 1: CSS generado

Ejemplo 1: HTML

<div class="transform_style_preserve_3d center_element">
     <p class="text">Padre</p>
     <div class="children center_element">
         <p class="text">
             Hijo
         </p>
     </div>
 </div>

Resultado

Padre

Hijo

Propiedad transform-style con flat

Ejemplo 2: SCSS

Ejemplo 2: CSS generado

Ejemplo 2: HTML

<div class="transform_style_flat center_element">
     <p class="text">Padre</p>
     <div class="children center_element">
         <p class="text">
             Hijo
         </p>
     </div>
 </div>

Resultado

Padre

Hijo

Cubo 3D realizado con la propiedad transform-style

Ejemplo 3: SCSS

Ejemplo 3: CSS generado

Ejemplo 3: HTML

<div class="cube_transform_style">
     <div class="face front">1</div>
     <div class="face back">2</div>
     <div class="face right">3</div>
     <div class="face left">4</div>
     <div class="face top">5</div>
     <div class="face bottom">6</div>
 </div>