Cómo rotar un elemento con respecto a un punto definido es decir, definido x & y coordinar en CSS (webkit)?

Normalmente la rotación de hacer punto central del elemento como referencia.

2 Comentarios

  1. 51

    Usted podría utilizar transform-origin.
    Se define el punto de girar alrededor de la esquina superior izquierda del elemento.

    transform-origin: 0% 0%

    Este giraría alrededor de la esquina superior izquierda.

    De otras opciones, mira aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

    por el lado más seguro si este enlace no disponible, entonces aquí hay un par de opciones más

    transform-origin: center; //one of the keywords left, center, right, top, and bottom
    
    transform-origin: top left; //same way can use two keywords
    
    transform-origin: 50px 50px; //specific x-offset | y-offset
    
    transform-origin: bottom right 60px; //third part is for 3D transform : z-offset

    Que yo sepa no hay una opción para girar alrededor de un punto fijo (aunque esto sería útil).

    • Eso es impresionante, yo no tenía ni idea de que esto se ponga en vigor del todo 🙂
    • Para webkit basado en el navegador tal vez necesita el prefijo: -webkit-transform-origin: 0% 0%
    • Eso es una gran solución. un enlace se rompe reemplazar con developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
  2. 1

    Si usted necesita un desplazamiento específico, es una manera de editar la imagen para hacerla más grande, de tal manera que el centro se encuentra en el centro de la imagen. A continuación, puede colocar esta dentro de un DIV con «overflow: none» y la posición con posicionamiento relativo. El div de la máscara fuera de la zona de la imagen que no desea mostrar.

Dejar respuesta

Please enter your comment!
Please enter your name here