Colocar un elemento rotado en la esquina superior izquierda o superior derecha

Al rotar un elemento, es fundamental comprender cómo se transforma el origen. afecta su posicionamiento. Esta propiedad especifica el punto alrededor del cual se rotará el elemento. Al ajustar el origen de transformación, puede controlar de manera efectiva la posición final del elemento después de la rotación.

Para colocar un elemento rotado en la esquina superior izquierda, modifique su origen de transformación a "arriba a la izquierda" y establezca traducirX en "- 100%". Esto asegurará que el elemento gire alrededor de la esquina superior izquierda y se mueva a su posición apropiada.

Aquí hay un código de ejemplo:

  Picture by Name

body {
  margin: 0;
}

.credit {
  transform-origin: top left;
  position: absolute;
  background-color: pink;
  transform: rotate(-90deg) translateX(-100%);
}

Por el contrario, para colocar el elemento rotado en la esquina superior derecha, simplemente cambie transform-origin a "arriba a la derecha" y mantenga TranslateX configurado en "-100%".

Puede explorar esta implementación en el violín proporcionado: [JS Fiddle](https://jsfiddle.net/wddwnj3t/).

Recuerde ajustar los valores de posicionamiento según sea necesario para adaptarse a su requisitos específicos. Experimente con diferentes configuraciones de origen de transformación para lograr la alineación y el diseño deseados para sus elementos rotados.