【CSS+JS】transformを使ってみる

2022-11-20

「input」タグの「text」を利用、jqueryを利用した簡単なスクリプトも用意して「label」タグに動きをつけてきました。
CSSでの動きなので、ほんとに単純な動きですが、今回は「transform」というプロパティを利用することを目的としています。
その様子を動画でご覧ください。

前半はいつも通りのCSSの準備などで、Jqueryに関してはCDNを利用させてもらっています。ネットがつながっているなら、そっちを利用する方が楽なのでｗ

で、jqueryでやっていることはほんとに大したことではなくて、「input」タグにフォーカスが当たった場合と、フォーカスが外れた場合に対して、「.on」というクラスをつけるか外すかというものです。

$(document).on(
    'focusin',
    'input',
    function()
    {
        $('div').addClass('on');
    }
);
$(document).on(
    'focusout',
    'input',
    function()
    {
        $('div').removeClass('on');
    }
);

たったこれだけのことで、特にアニメーションの設定などはしていません。
つまり、簡単だけども、アニメーションはCSSで行っています。

「input」タグの中にある文字は「label」タグで配置しているだけなので、これをCSSによって自由に動かしているという感じになっています。

label {
    position: absolute;
    z-index: 10;
    top: 6px;
    left: 5px;
    padding: 0.25em 1em;
    background: transparent;
    color: #999;
    box-shadow: none;
    transition-duration: 0.5s;
}
.on label {
    position: absolute;
    top: -30px;
    left: -40px;
    transform: rotateZ(-10deg);
    background: #B00;
    color: white;
    box-shadow: 0 0 20px #AAA;
    font-weight: 700;
    transition-duration: 0.5s;
}

上の「label」は通常時のもので、「input」タグの中に入るように調整している。下の方では「DIV」タグに「on」というクラスが付属されたときの「label」の位置をずらしていく。で、いつも通り、「transition-duration」によってアニメーションを起こしているという感じです。

では今回は「transform」ですが、下の部分「.on label」のブロックに記述されています。

「rotate」とは軸を表しています。なので、動画の様な動きをさせるには、「Z軸」に対して回転させるのがいいということになります。これについては他のサイトで詳しく掲載されているので、ちょっと検索してみてください。