Posicionando um elemento girado no canto superior esquerdo ou superior direito

Ao girar um elemento, é crucial entender como a origem da transformação afeta seu posicionamento. Esta propriedade especifica o ponto em torno do qual o elemento será girado. Ao ajustar a origem da transformação, você pode controlar efetivamente a posição final do elemento após a rotação.

Para posicionar um elemento girado no canto superior esquerdo, modifique sua origem da transformação para "canto superior esquerdo" e defina translateX como "- 100%". Isso garantirá que o elemento gire em torno do canto superior esquerdo e se mova para sua posição apropriada.

Aqui está um exemplo de código:

  Picture by Name

body {
  margin: 0;
}

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

Por outro lado, para posicionar o elemento girado no canto superior direito, basta alterar transform-origin para "superior direito" e manter o translateX definido como "-100%".

Você pode explorar esta implementação no violino fornecida: [JS Fiddle](https://jsfiddle.net/wddwnj3t/).

Lembre-se de ajustar os valores de posicionamento conforme necessário para se adequar ao seu requisitos específicos. Experimente diferentes configurações de origem de transformação para obter o alinhamento e layout desejados para seus elementos girados.