CSS3左上の位置を保存します

StackOverflow https://stackoverflow.com//questions/25073432

  •  26-12-2019
  •  | 
  •  

質問

幅と高さが変わることができる画像を持っています。イメージを維持する最初の上および左の位置を維持できるようにしたいです。私は変換を使っています：回転（270deg）; 問題は、画像が左に移動していることです。私は、変換由来のCSSプロパティが問題を解決できることを知っていますが、このプロパティの左上の値を計算する方法は？それのための式がありますか？ これは、画像が最初の左位置から左に移動されることを示す例です。 http://jsfiddle.net/h48ca/2/ 

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

役に立ちましたか？

解決

これは回転です - 回転アニメーション

注：視認性が良いため、画像のサイズは変更されました！

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);
}
.
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top