CSS3은 왼쪽 상단 위치를 보존하는 이미지를 회전시킵니다

Question

나는 폭과 높이가 다를 수있는 이미지를 가지고 있습니다.나는 초기 상단 및 왼쪽 위치를 보존하는 이미지를 회전시키고 싶습니다.나는 변환을 사용하고 있습니다 : 회전 (270deg); 문제는 이미지가 왼쪽으로 이동하는 것입니다.나는 변형 원본 CSS 속성이 문제를 해결할 수 있지만이 속성에 대한 왼쪽 값을 계산하는 방법은 무엇입니까?어쩌면 그 공식이 있을까요? 여기에 이미지가 초기 왼쪽 위치에서 왼쪽으로 이동 해주는 예제가 있습니다. "Nofollow"> http://jsfiddle.net/h48ca/2/2/A>

<img src="https://dl.dropboxusercontent.com/u/31490359/e001420737da443b0fb75abfaddc5f22.jpg" style="transform: rotate(270deg); -webkit-transform: rotate(270deg); -ms-transform:rotate(270deg);">

.

Answer 1

이것은 회전 애니메이션 ....

참고 : 더 나은 가시성 때문에 이미지 크기가 수정되었습니다!

html

<img src="https://dl.dropboxusercontent.com/u/31490359/e001420737da443b0fb75abfaddc5f22.jpg">

.

CSS

img{
    width:40%;
    height:auto;
    position:absolute;
    top:100px;
    left:50px;
    transition:all 2s ease;
}

img:hover {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -ms-transform:rotate(270deg);
}

.