今回学ぶ事ができればボタンにカーソルが乗るとボタンが拡大したり縮小したりするものが作れます
Webサイトでよくみるやつだね
カーソルを乗せてください
1.scale
セレクター{
transform: scale();
}1-1.scale
値を”scale”にして( )内に数値を入れることで指定したもののサイズを変える事ができます。
ちなみに単位はいりません。
img:hover{
transform: scale(1.5, 0.5);
}カーソルを乗せてください
X軸方向に1.5倍、Y軸に0.5倍(半分)のサイズになります。
scaleもどちらか一方だけを指定することができます
1-2.scaleX
セレクター{
transform: scaleX();
}scaleX( )とし、( )内に数値を入れることでX軸方向へのサイズ変更を指定できます。
img:hover{
transform: scaleX(1.5);
}カーソルを乗せてください
X軸方向に1.5倍のサイズになっています。
1-3.scaleY
セレクター{
transform: scaleY();
}scaleY( )とし、( )内に数値を入れることでY軸方向へのサイズ変更を指定できます。
img:hover{
transform: scaleY(0.5);
}カーソルを乗せてください
Y軸方向に0.5倍のサイズになっています。
1-4.scaleを使ってみる
最初の例で出したボタンはこんな感じで作れられています
カーソルを乗せてください
カーソルを乗せてください
<div class="button">ボタン</div>
<div class="button2">ボタン2</div>/*ボタン*/
.button,.button2{
transition: all .8s;
background: #333;
display: block;
color: #fff;
cursor: pointer;
padding: 6px 10px;
margin: 0 auto;
text-align: center;
border-radius: 5px;
}
.button:hover{
transform: scale(1.3, 1.3);
}
.button2:hover{
transform: scale(0.8, 0.8);
}
また画像に使うとこういう事もできます。
カーソルを乗せてください
<div class="imageWrapper">
<img src="〇〇.jpg" class="image">
</div>/*親要素*/
.imageWrapper{
width: 70%
margin: 0 auto;
}
.image{
width: 100%;
transition: all .8s;
}
.imageB:hover{
transform: scale(1.2, 1.2);
}こちらは画像にカーソルが乗ると普通に拡大します
カーソルを乗せてください
<div class="imageWrapper2">
<img src="〇〇.jpg" class="image">
</div>/*親要素*/
.imageWrapper2{
width: 70%;
margin: 0 auto;
overflow: hidden;
}
.image{
width: 100%;
transition: all .8s;
}
.image:hover{
transform: scale(1.2, 1.2);
}こちらは親要素に”overflow: hidden;“というものを付け加える事で画像にカーソルが乗ると溢れた分が非表示にされるので、結果的に決められた枠内で拡大させる事ができます
これを基本にいろんな変化の要素を作ってください(笑)
2.skew
2-1.skew( )
セレクター{
transform: skew(○○deg,○○deg);
}skew(スキューと読みます。読めませんでした…💦)は指定したものを歪ませる事ができます。
単位はrotateと同じくdegで書きます。
img{
transform: skew(30deg,30deg);
}カーソルを乗せてください
<div class="boxA box">boxA</div>
<div class="boxB box">boxB</div>.box{
width: 100px;
height: 100px;
}
.boxA{
transform: skew(15deg,15deg);
background-color: lime;
}
.boxB{
transform: skew(-15deg,-15deg);
background-color: orange;
}例の如くskewも個別に指定できます。
2-2.skewX( )
セレクター{
transform: skewX(○○deg);
}skewX( )とし、( )内に数値を入れることでX軸方向の歪みを指定できます。
img{
transform: skewX(180deg);
}カーソルを乗せてください
<div class="boxA box">15deg</div>
<div class="boxB box">30deg</div>
<div class="boxC box">45deg</div>
<div class="boxD box">-15deg</div>.box{
width: 100px;
height: 100px;
}
.boxA{
transform: skewX(15deg);
background-color: pink;
}
.boxB{
transform: skewX(30deg);
background-color: skyblue;
}
.boxC{
transform: skewX(45deg);
background-color: lime;
}
.boxD{
transform: skewX(-15deg);
background-color: orange;
}数値を大きくするごとにX軸方向への歪みが大きくなっていってる事がわかります。
また-(マイナス)で指定することもでき、その時は逆方向に歪みます。
2-3.skewY( )
セレクター{
transform: skewY(○○deg);
}skewY( )とし、( )内に数値を入れることでY軸方向の歪みを指定できます。
カーソルを乗せてください
<div class="boxA box">15deg</div>
<div class="boxB box">30deg</div>
<div class="boxC box">45deg</div>
<div class="boxD box">-15deg</div>.box{
width: 100px;
height: 100px;
}
.boxA{
transform: skewY(15deg);
background-color: pink;
}
.boxB{
transform: skewY(30deg);
background-color: skyblue;
}
.boxC{
transform: skewY(45deg);
background-color: lime;
}
.boxD{
transform: skewY(-15deg);
background-color: orange;
}こちらも数値を大きくするごとにY軸方向への歪みが大きくなっていってる事がわかります。
また-(マイナス)で指定することもでき、その時は逆方向に歪みます。
2-4.skewを使ってみる
img{
transform: skewX(10deg);
}極端に指定するより軽めに指定して傾けるのがオシャレだね
HELLO!!
p{
border-top: 2px solid #333;
border-bottom: 2px solid #333;
display: inline-block;
font-size: 2rem;
transform: skewX(-15deg);
}hタグやpタグなどに使うとイタリック体っぽく斜体にすることもできますね
3.まとめ
- 指定したもののサイズを変える
セレクター{
transform: scale();
}- scaleX( )で横方向、scaleY( )で縦方向の指定ができる
セレクター{
transform: scaleX();
}
セレクター{
transform: scaleY();
}カーソルを乗せてください
.box1:hover{
transform: scaleX(1.3);
}
.box2:hover{
transform: scaleY(0.5);
}
.box3:hover{
transform: scale(1.3, 0.5);
}- 指定したもの歪ます
- 単位は”deg”で指定する
- マイナスで指定すると向きが逆になる
セレクター{
transform: skew(○○deg, ○○deg);
}- skewX( )で横方向、skewY( )で縦方向の指定ができる
セレクター{
transform: skewX(○○deg);
}
セレクター{
transform: skewY(○○deg);
}カーソルを乗せてください
.box1:hover{
transform: skewX(15deg);
}
.box2:hover{
transform: skewY(15deg);
}
.box3:hover{
transform: skew(15deg,15deg);
}
.box4:hover{
transform: skewX(-15deg);
}
コメント