質問
幅と高さが変わることができる画像を持っています。イメージを維持する最初の上および左の位置を維持できるようにしたいです。私は変換を使っています:回転(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);
}
. 所属していません StackOverflow