スポンサーリンク
共通html
htmlでは、画像を表示させることしかやっていません。
<div id="sample">
<img src="./yasai.jpg" alt="野菜の写真" />
</div>
共通CSS
CSSでは、画像のサイズとバックグランドの色を設定しています。imgでは、動作の時間とイージングを設定しています。
#sample {
width: 300px;
height: 200px;
background-color: #0a0;
}
#sample img {
transition: all 0.2s ease;
}
1.画像を縮小する
transform:scaleで、1より小さい値を設定することで縮小できます。CSS
#sample1 img:hover {
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
2.画像を拡大するその1
transform:scaleで、1より大きな値を設定することで拡大できます。この場合は枠をはみ出してしまうので、画像に影をつけてみました。CSS
#sample2 img:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
box-shadow: 1px 2px 3px #000;
}
3.画像を拡大するその2
overflow:hiddenを設定して枠から出ないようにします。CSS
#sample3 {
overflow: hidden;
}
#sample3 img:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
4.画像を横方向に拡大する
transform:scaleXで、X方向に拡大します。CSS
#sample4 {
overflow: hidden;
}
#sample4 img:hover {
-webkit-transform: scaleX(1.5);
transform: scaleX(1.5);
}
5.画像を縦方向に拡大する
transform:scaleYで、Y方向に拡大します。CSS
#sample5 {
overflow: hidden;
}
#sample5 img:hover {
-webkit-transform: scaleY(1.5);
transform: scaleY(1.5);
}
6.拡大&45度回転する
このブログでもアイキャッチ画像のエフェクトで使用しているパターンです。CSS
#sample6 {
overflow: hidden;
}
#sample6 img {
transform: rotate(0) scale(1);
-webkit-transform: rotate(0) scale(1);
transition: all 0.2s ease;
}
#sample6 img:hover {
transform: rotate(45deg) scale(1.5);
-webkit-transform: rotate(45deg) scale(1.5);
}
7.横に360度回転する
overflow:hiddenを設定して枠からはみ出ないようにしています。CSS
#sample7 {
overflow: hidden;
}
#sample7 img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
#sample7 img {
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
8.横に180度回転する
Y軸を中心に180度回転します。
CSS
#sample8:hover img {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#sample8 img, #sample8:hover img {
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
9.縦に180度回転する
X軸を中心に180度回転します。
CSS
#sample9:hover img {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
#sample9 img, #sample9:hover img {
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
コメントを残す