KinutaHandicraft log
    ヒ ン ト 集
■ ヒントになるのか?HTML ■
    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へ     前のページに戻る     ページ閉じる
© KinutaHandicraft