今回はCSSのtransformプロパティをいくつか紹介します。
コピペで持って行ってOKなので、是非ご活用ください。
完成品のコード
See the Pen Untitled by WEB-DEN (@Yukiwebcreate) on CodePen.
今回は４パターン紹介します。
４つのブロックを用意しており、それぞれホバーするとtransformが適用されるようになっています。
ベースとなるHTMLとCSSは以下の通りです。
<div class="tf-container">
<div id="tf01" class="tf-target"></div>
<div id="tf02" class="tf-target"></div>
<div id="tf03" class="tf-target"></div>
<div id="tf04" class="tf-target"></div>
</div>.tf-target{
width: 100px;
height: 100px;
background-color: lightgreen;
border-radius:8px;
transition: .2s;
cursor:pointer;
margin-bottom: 30px;
}以降は各transformプロパティの解説をしていきます。
transformプロパティとは？
transformは、CSSによる変形を指示するためのプロパティです。
回転させたり大きくさせたりすることが可能です。
ボタンをホバーすると少し大きくなったり、
押下するとボタンをまるで押し込んだかのように少しズレたりするのを見たことがあると思います。
そういった表現がtransformによって実現できます。
サンプルの各コード解説
今回紹介する４つのtransformを解説します。
1. rotate
一つ目は回転させるrotateを使用しています。
#tf01:hover{
transform:rotate(45deg);
}rotateは回転させるという意味なので、そのままでわかりやすいですね。
45degや90degといった値に設定することでその角度分回転させることができます。
2. scale
二つ目は大きくするscaleです。
#tf02:hover{
transform:scale(1.2);
}こちらは要素を拡大するものです。
単位を省いて数字だけで1.1や1.2とすると、1.1倍、1.2倍と指定していることになります。
また、「200%」など%での指定も可能です。
3. translate
三つ目はtranslateです。
#tf03:hover{
transform: translate(10px,10px);
}translateは対象の要素を平行移動させるものです。
10px,10pxと指定すると、x軸,y軸それぞれ10pxずつ移動させるという指示になります。
与える数値を１つだけにし、例えば(10px)とだけ指定すると、x軸(横方向)に10px移動します。
4. skew
４つ目はskewです。
#tf04:hover{
transform: skew(10deg,10deg);
}skewは要素を2D平面上で歪ませることができます。
10degなどと指定することで歪みの量を指定できます。
使用頻度は高くないかもしれませんが、何かの装飾などに使えそうですね。
おまけ要素
試しにCSSの@keyframesを使ったアニメーションとskewを組み合わせて、
みよんみよんに動くブタさんを作ってみました（特に意味はない）
See the Pen transform-property-anime by WEB-DEN (@Yukiwebcreate) on CodePen.
↑の例はかなり雑ですが、
単純な四角や丸などをkeyframesを使ってアニメーション化し、Webサイトのあしらいとして使用する、
というのも面白いかもしれませんね。
まとめ
今回はtransformプロパティをいくつか紹介しました。
参考になれば幸いです！
あざした
