【CSS】要素を変化させるtransformプロパティ-後編-

transform後編のアイキャッチ
こばゆた
こばゆた

transform後半です

前半はtransitionとrotateをやっています

よろしければどうぞ!

こばゆた
こばゆた

今回学ぶ事ができればボタンにカーソルが乗るとボタンが拡大したり縮小したりするものが作れます

きなこ
きなこ

Webサイトでよくみるやつだね

カーソルを乗せてください

ボタン
ボタン
スポンサーリンク

1.scale

セレクター{
  transform: scale();
}

1-1.scale

値を”scale”にして( )内に数値を入れることで指定したもののサイズを変える事ができます。

ちなみに単位はいりません。


img:hover{
  transform: scale(1.5, 0.5);
}

カーソルを乗せてください

scale

X軸方向に1.5倍、Y軸に0.5倍(半分)のサイズになります。

こばゆた
こばゆた

scaleもどちらか一方だけを指定することができます

1-2.scaleX

セレクター{
  transform: scaleX();
}

scaleX( )とし、( )内に数値を入れることでX軸方向へのサイズ変更を指定できます。


img:hover{
  transform: scaleX(1.5);
}

カーソルを乗せてください

scaleX

X軸方向に1.5倍のサイズになっています。

1-3.scaleY

セレクター{
  transform: scaleY();
}

scaleY( )とし、( )内に数値を入れることでY軸方向へのサイズ変更を指定できます。


img:hover{
  transform: scaleY(0.5);
}

カーソルを乗せてください

scaleY

Y軸方向に0.5倍のサイズになっています。

1-4.scaleを使ってみる

最初の例で出したボタンはこんな感じで作れられています

カーソルを乗せてください

ボタン

カーソルを乗せてください

ボタン2
<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);
}

カーソルを乗せてください

skew

boxA
boxB
<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);
}

カーソルを乗せてください

skewX

15deg
30deg
45deg
-15deg
<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軸方向の歪みを指定できます。


カーソルを乗せてください

skewY

15deg
30deg
45deg
-15deg
<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.まとめ

scaleまとめ
  • 指定したもののサイズを変える
セレクター{
  transform: scale();
}
  • scaleX( )で横方向、scaleY( )で縦方向の指定ができる
セレクター{
  transform: scaleX();
}

セレクター{
  transform: scaleY();
}

カーソルを乗せてください

scaleX
scaleY
scale
.box1:hover{
  transform: scaleX(1.3);
}

.box2:hover{
  transform: scaleY(0.5);
}

.box3:hover{
  transform: scale(1.3, 0.5);
}

skewまとめ
  • 指定したもの歪ます
  • 単位は”deg”で指定する
  • マイナスで指定すると向きが逆になる
セレクター{
  transform: skew(○○deg, ○○deg);
}
  • skewX( )で横方向、skewY( )で縦方向の指定ができる
セレクター{
  transform: skewX(○○deg);
}

セレクター{
  transform: skewY(○○deg);
}

カーソルを乗せてください

skewX
skewY
skewX,Y
skew-X

.box1:hover{
  transform: skewX(15deg);
}

.box2:hover{
  transform: skewY(15deg);
}
 
.box3:hover{
  transform: skew(15deg,15deg); 
}

.box4:hover{
  transform: skewX(-15deg);
}

コメント