¿Como aplicar transformaciones CSS3 a un elemento padre sin afectar los elementos hijos?

publicado por: Anonymous

Necesito aplicar una transformación de scale y skew a un div, pero al realizar dicha transformación resulta que también se le aplica a los elementos hijos.

¿Como hago para que los elementos hijos omitan esa propiedad?

solución

Realmente, como ya te han comentado, se podría realizar esto simplemente revirtiendo el valor de la transformación para los elementos hijos. Sin embargo, yo usaría el selector #padre > * o padre * para indicar que todos los hijos de ese padre, sean el elemento que sean, reviertan dicha propiedad (el primer selector haría referencia a los hijos directos del padre y el segundo a cualquier elemento dentro del padre).

También añadiría un ID si es solamente un elemento el que va a ser transformado o una clase si van a ser varios elementos transformados con las mismas propiedades pero si pones div harás referencia a cada uno de los elementos div de tu página.

También tendrás que tener en cuenta si tienes elementos inline dentro de tu contenedor padre o no, ya que estos no aplicarán ninguna transformación y por tanto no podrán revertir tampoco la transformación del elemento padre. Para que esta transformación sea posible deberás indicar que tus elementos inline se comporten como inline-block o block.

Tomando como referencia el ejemplo de la otra respuesta:

_x000D_

_x000D_

.distorsionado {_x000D_
  padding: 20px;_x000D_
  background: red;_x000D_
  color: white;_x000D_
  transform: skew(30deg) scale(1.5);_x000D_
  max-width:200px;_x000D_
  margin:50px auto;_x000D_
  text-align:center;_x000D_
}_x000D_
_x000D_
.divHijo{_x000D_
  height: 50px;_x000D_
  width: 50px;_x000D_
  background-color: blue;_x000D_
}_x000D_
_x000D_
.distorsionado.not > *{_x000D_
  transform: skew(-30deg) scale(.66);_x000D_
}_x000D_
_x000D_
#padre > *{_x000D_
  display: block;_x000D_
  transform: skew(-30deg) scale(.66);_x000D_
}

_x000D_

<h3>Los elementos hijos heredando del padre.</h3>_x000D_
<div class="distorsionado">_x000D_
  <p>Distorsionado</p>_x000D_
  <div class="divHijo">Esto es un div</div>_x000D_
  <span>Distorsionado</span>_x000D_
</div>_x000D_
_x000D_
<h3>Los elementos hijos que son inline-block o block sin herencia.</h3>_x000D_
<h3>Elementos inline no aplican esta reversión. </h3>_x000D_
<div class="distorsionado not">_x000D_
  <p>No Distorsionado</p>_x000D_
  <div class="divHijo">Esto es un div</div>_x000D_
  <span>Distorsionado</span>_x000D_
</div>_x000D_
_x000D_
<h3>Ninguno de los elemento hijos tiene herencia.</h3>_x000D_
<h3>Todos son tratados como block.</h3>_x000D_
<div id="padre" class="distorsionado">_x000D_
  <p>No Distorsionado</p>_x000D_
  <div class="divHijo">Esto es un div</div>_x000D_
  <span>No distorsionado</span>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *