[立体回転ボタン演出]dataset(カスタムdata属性)は[data-***]で独自のデータ属性を指定できる仕様です。属性」の使用例を見たことが無い、デザイナーさんやフロントエンドエンジニアさん向けに書いています。属性の使用例を紹介しました。使って作るサンプルを紹介しています。文字を表示する、というネタです。組み合わせると、ボタンホバー時に立体的に動かす演出などでも活用できたりします。ボックスになっています。立体的に動かすだけで、webで見かけるこういう演出をいろいろ作ることができるようになりました。2つ並べるような仕様になっています。class="yyy">TOP</span>のような感じで1個のメニューに演出のためだけの不要なspanと、メニューも含め、3つの同じ文字列が並んでしまいます。いう情報になる、ということです。こんな時に、[data-***]を使えば、この余計なspanタグ部分を[before][after]で作ることができ、正しいHTML記述が出来る上に、ソース記述も分かりやすくシンプルなものにすることができるので、おすすめです。使ってやるのはおおげさかと思ったりしてしまいます。重要な要素になっていたりします。サンプル1のCSS※ベンダープレフィックスは省略しています。以上の場合となります。なるようにしています。HTMLタグの方に書いている文字列を表示します。translateY(-50px)に変化して上に回転します。ボックスの位置を移動させることかと思います。指定してホバー動作を確認した例のキャプチャ画像です。指定しホバー動作を確認した例のキャプチャ画像です。開発すると、微妙にずれてしまったりせずにぴったりとフィットする感じの立体動作演出が作りやすいかと思います。一般的になり、HTML構文的にちゃんと意味のあるタグの使用が推奨されています。DOM操作以外では、あまり増殖させないほうがよいかと思ったりします。使って商売する側として大切なテーマではないかと思ったりします。活用して動作確認をする、なども有効な手法かと思ったりします。増殖しがちなカウントダウンアニメ演出をdatasetで単純化するアイデアを紹介します。以上、長い記事を最後まで読まれたみなさん、お疲れさまでした。使って作るサンプルを紹介しています。文字を表示する、というネタです。使って作るサンプルを紹介しています。活用アイデア今でも使える技ですがあくまで昔話、として紹介します。