¿Hay alguna manera de usar CSS? Transformar y no afectar elementos secundarios

Question

Creé un mockup para demostrar mi problema. Me temo que la solución cae en lo que hice con el primer ejemplo (recuadro 1).

Simplemente no sé por qué no puedo aplicar una transformada de CSS a un elemento padre y evite aplicarlo al elemento secundario o al menos anularlo.

Avíseme si hay una forma de obtener el efecto del primer ejemplo utilizando la propiedad de transformación. No quiero que la segunda imagen sea escalada también. Solo el padre div.

---

Nota

Estoy tratando de utilizar esta propiedad para habilitar la aceleración de la GPU.

Answer 1

que quería utilizar -transform para obtener el beneficio rendimiento de la GPU. Supongo que continuaré usando la animación de ancho: http://jsfiddle.net/Vyaf3/22/ pero con la aplicación de una propiedad css3 que permitiría la aceleración de la GPU.

Answer 2

No he jugado con esto en ningún otro navegador que no sea el cromo.

Pero parece que el conjunto oculto de desbordamiento en el elemento padre implica cambiar el tamaño de la herencia en la imagen.

Así que si establece automática de desbordamiento en las cajas a las que se aplica la animación, se debe fijar la herencia de cambio de tamaño.

http://jsfiddle.net/gnrlbzik/5Q8EC/ comprueba el desbordamiento se pone en auto, que mantiene las dimensiones de imagen en el tacto.

Answer 3

Ser semántica no creo que usted debería ser capaz de evitar que la transformación de un elemento hijo siendo está transformando/escalado es contenedor, no cambiar su tamaño. Una transformación no solo anima el ancho como el ejemplo en el cuadro 1, sino que escala la x.

Creo que esta pregunta se trata de tratar de obtener un impulso en el rendimiento mediante el uso de funciones que utilizan la GPU para procesar animaciones. Esto es posible, creo, al tratar de manera efectiva los elementos como una imagen que la GPU luego anima. Por lo tanto, no puede tener un elemento dentro que guarde dinámicamente su tamaño/forma durante una animación. Tal vez haya una forma de contrarrestar la animación transformando el elemento dentro del que te gustaría mantener estática, pero probablemente no sea eficiente ni efectiva.

Nota: No estoy muy familiarizado con la tecnología que usa webkit para representar estas transformaciones. Así que lo siento si los detalles más finos de la representación no son muy precisos. Actualizaré esto si alguien comenta con una mejor descripción de cómo funciona la transformación.