■ ヒントだよ！HTML & CSS ■

    topへ     前のページに戻る     ページ閉じる

■ transform関係
※要素変形後のレイアウト調整が必要！！
 
・元画像
<img src="img/test.jpg" width="300" height="80" alt="画像"></div>

・transform 1
.box4 img { transform: translate(50px,50px) rotate(15deg); }
<div class="box4">
<img src="img/test.jpg" width="300" height="80" alt="画像"></div>
<div class="box1">
<img src="../../img/999.png" width="300" height="80" alt="空白画像"></div>

・transform 2
.box5 img { transform: translate(100px,100px) scale(1.4,0.5); }
<div class="box5">
<img src="img/test.jpg" width="300" height="80" alt="画像"></div>
<div class="box1">
<img src="../../img/999.png" width="300" height="60" alt="空白画像"></div>

 
・transform 3
.box6 img { transform: translate(50px,50px) skew(20deg,5deg; }
<div class="box6">
<img src="img/test.jpg" width="300" height="80" alt="画像"></div>
<div class="box1">
<img src="../../img/999.png" width="300" height="80" alt="空白画像"></div>
<div class="box2 size2 tar00"><a href="#top">▲このページ一番上へ</a></div>

・transform-origin
.box7 img {
border: solid 1px red;
transform: rotate(30deg);
transform-origin: bottom left;
}
<div class="box7">
<img src="img/test.jpg" width="300" height="80" alt="画像"></div>
<div class="box1">
<img src="../../img/999.png" width="300" height="125" alt="空白画像"></div>
<div class="box2 size2 tar00"><a href="#top">▲このページ一番上へ</a></div>

    topへ     前のページに戻る     ページ閉じる