Transformaciones CSS3: ¿Múltiples orígenes?

¿Es posible especificar un origen en la parte superior izquierda (0%, 0%) para escalar, y un origen (centro) diferente para la rotación en CSS3? Solo estoy trabajando con webkit, si eso ayuda.Transformaciones CSS3: ¿Múltiples orígenes?

actualmente estoy usando una lista de transformación (es decir -webkit-transform: escala (newScale) Girar (newRotate)

pero parece que no es posible cambiar el origen en el medio pases está allí. una mejor manera de ver esto? En este momento, si escalo un objeto y lo giro con un origen en el centro predeterminado, la posición del elemento está ahora desactivada y entonces cuando arrastras el elemento, el cursor está aún en la parte superior izquierda del elemento, mientras que debería estar en el centro Cambiando el origen hasta el centro de la escala que fija esto, pero presenta nuevos problemas con la rotación y el volteo

Fuente

2012-01-20 David

encontrado una buena solución al problema ... mediante la creación de una relación padre/hijo de la siguiente manera:

<div class="container"> 
    <img src="" /> 
</div>

ahora puedo configurar dos clases de la siguiente manera:

.container { 
    -webkit-transform-origin: 0% 0%; 
    -webkit-transform: scale(0.5); 
} 

.container img { 
    -webkit-transform-origin: 50% 50%; 
    -webkit-transform: rotate(45deg); 
}

Esto va a hacer exactamente lo que quiero: escala con un origen en la parte superior izquierda, luego gira con el origen en el centro. Voila!

Fuente

2012-01-22 17:44:00 David

+1 para una solución -1 para marcado innecesario. Esto parece un problema con el diseño de estas reglas por parte de webkit. – arkanciscan

Su comentario no está ayudando a nadie arkanciscan. Responde la pregunta de la manera en que se implementa actualmente. ¿Tienes otra sugerencia para contribuir? –

Esta fue mi única esperanza, pero todavía no está girando correctamente. – JacopKane

¿Qué hay de que:.. http://jsfiddle.net/22Byh/1/

Fuente

2012-01-20 20:12:49 dfsq

Esa es una buena idea, pero parece que solo ejecuta la última de las dos transformaciones. Si tocas el escalar hasta 2.0+ para que realmente puedas verlo, notarás que no parece escalar. Si cambia el orden para que la escala se realice en segundo lugar, no parece rotar. ¿Me estoy perdiendo de algo? – David

En cambio, piense en la escala con origen (0,0) como una escala + traducción con centro de origen. Aisladamente los siguientes:

-webkit-transform-origin: top left; 
-webkit-transform: scale(1.5);

es lo mismo que:

-webkit-transform-origin: center; 
-webkit-transform: scale(1.5) translate3d(16.66%, 16.66%, 0);

En teoría, el centro de origen de la rotación debe salir de las esquinas sobresaliendo por sqrt(1/2)-0.5 que nos obliga a mover el origen abajo ya la derecha por 20.71%, pero, por alguna razón, el algoritmo de transformación de webkit nos baja las cosas (pero no lo suficiente) y escala el origen para nosotros (de nuevo no del todo). Por lo tanto tenemos que mover a la derecha 50% y hacer algunos ajustes para este comportamiento extraño:

-webkit-transform-origin: center; 
-webkit-transform: scale(1.5) rotate(45deg) translate3d(52.5%, 0.5%, 0); 
-webkit-transition: all 2s ease-in;

Nota: mi respuesta original estaba usando un div con width:100px; y height100px; que requiere un translate3d(54px, 0, 0).

Fuente

2012-01-20 22:08:59

Brett, estoy familiarizado con la traducción para mover el origen, escalar y luego traducir, pero este es nuevo para mí. ¿Cómo funciona la traducción al final? ¿54px sirve como un ejemplo del ancho/2 del activo? Perdón, tratando de resolver mi problema ... – David

Observe cómo una escala con origen (0,0) mueve el centro del objeto a medida que escala? Entonces esto es lo mismo que escalar con origen (50%, 50%) mientras se traduce el objeto simultáneamente. –

Transformaciones CSS3: ¿Múltiples orígenes?

Respuesta

Cuestiones relacionadas