5

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?

1
  • 1
    Hola Camilo, por favor indica cómo lo estás haciendo y, si es posible, indica cuál es el resultado esperado. Edita tu pregunta siguiendo esta guía: ejemplo mínimo verificable.
    – toledano
    Commented el 1 dic. 2016 a las 21:29

2 respuestas 2

2

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:

.distorsionado {
  padding: 20px;
  background: red;
  color: white;
  transform: skew(30deg) scale(1.5);
  max-width:200px;
  margin:50px auto;
  text-align:center;
}

.divHijo{
  height: 50px;
  width: 50px;
  background-color: blue;
}

.distorsionado.not > *{
  transform: skew(-30deg) scale(.66);
}

#padre > *{
  display: block;
  transform: skew(-30deg) scale(.66);
}
<h3>Los elementos hijos heredando del padre.</h3>
<div class="distorsionado">
  <p>Distorsionado</p>
  <div class="divHijo">Esto es un div</div>
  <span>Distorsionado</span>
</div>

<h3>Los elementos hijos que son inline-block o block sin herencia.</h3>
<h3>Elementos inline no aplican esta reversión. </h3>
<div class="distorsionado not">
  <p>No Distorsionado</p>
  <div class="divHijo">Esto es un div</div>
  <span>Distorsionado</span>
</div>

<h3>Ninguno de los elemento hijos tiene herencia.</h3>
<h3>Todos son tratados como block.</h3>
<div id="padre" class="distorsionado">
  <p>No Distorsionado</p>
  <div class="divHijo">Esto es un div</div>
  <span>No distorsionado</span>
</div>

2

Evitar que las propiedades afecten a los elementos hijos no es posible. Usualmente lo que se hace es revertir las propiedades del padre, algo por este estilo:

div {
  padding: 20px;
  background: red;
  color: white;
  transform: skew(30deg) scale(1.5);
  max-width:200px;
  margin:50px auto;
  text-align:center;
}
div.not p {
  transform: skew(-30deg) scale(.66);
}
<div>
  <p>Distorsionado</p>
</div>
<div class="not">
  <p>No Distorsionar</p>
</div>

5
  • Tengo una pregunta, que operación hiciste para saber que valor colocar en el scale del elemento con clase not? Commented el 1 dic. 2016 a las 21:14
  • @CamiloVasquez basicamente es un pequeño lio matemático XD.. tras la primera transformación el elemento aumento su tamaño en .5 lo que hace que su tamaño original sea 2/3 del actual ... por tanto para revertir el aumento ahora necesito un elemento de 2/3 de tamaño osea .66; es un aproximado creo que es la propiedad mas complicada de revertir
    – DaniP
    Commented el 1 dic. 2016 a las 21:17
  • 1
    Muchas gracias, problema resuelto ! :D Commented el 1 dic. 2016 a las 21:31
  • 1
    Para obtener la inversa de una escala, sólo hay que calcular 1 / escala... Ejemplo: 1 / 1.5 = 0.66667
    – Mariano
    Commented el 1 dic. 2016 a las 22:29
  • Gracias por la aclaracion @Mariano
    – DaniP
    Commented el 2 dic. 2016 a las 13:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.