リンクボタンはウェブサイトのインタラクションを強化する重要な要素です。今回は、ホバー時に3D回転するアニメーションを施したリンクボタンの作成方法を紹介します。ユーザーに魅力的な体験を提供するための視覚的にインパクトのあるデザインです。
サンプル
See the Pen 3D-Link by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.
実装コード
まずは、HTMLとCSSコードをご紹介します。
<div class="btn-wrapper">
<div class="button-3d-container">
<div class="rotating-box"></div>
<a href="#" class="fixed-text">Link button</a>
</div>
</div>.button-3d-container {
position: relative;
display: inline-block;
perspective: 800px; /* 3D効果の深さを調整 */
width: 200px; /* ボタンの幅 */
height: 50px; /* ボタンの高さ */
cursor: pointer; /* カーソルをポインターに */
}
/* 回転するボックス */
.rotating-box {
position: absolute;
width: 100%;
height: 100%;
background: #000; /* ボタンの背景色 */
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); /* アニメーションのスピードとタイミング */
z-index: 1;
}
/* 固定テキスト */
.fixed-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 中央に配置 */
color: #fff; /* テキストの色 */
font-size: 16px;
font-weight: bold;
text-decoration: none;
z-index: 2;
white-space: nowrap;
pointer-events: none; /* テキストがクリックできないように */
transition: color 0.3s; /* ホバー時にテキスト色を変える */
}
/* ホバー時の3D回転 */
.button-3d-container:hover .rotating-box {
transform: rotateX(-180deg); /* 回転角度を変更 */
}
/* 背面デザイン */
.rotating-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff; /* 背面の背景色 */
transform: rotateX(180deg); /* 背面を回転 */
backface-visibility: hidden; /* 回転時に裏面が表示されないように */
border: solid 1px #000; /* 背面に枠線を追加 */
}
.button-3d-container:hover .fixed-text {
color: #000; /* ホバー時にテキストの色を変更 */
}コードの解説とカスタマイズポイント
.button-3d-containerのperspective
perspective: 800px;perspectiveは、3D効果の深さを調整します。値を大きくすると、回転が滑らかで広い範囲で感じられ、逆に小さくすると回転が急激に見えます。例えば、perspective: 500px;にすると、より直感的に急激な3D効果を感じられます。
カスタマイズ例
.rotating-boxのtransform-styleとtransition
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);transform-style: preserve-3d;は、子要素の3D効果を保持するためのプロパティです。このプロパティがないと、3D回転が正しく表示されません。transitionはアニメーションのスピードやタイミングを指定しています。cubic-bezier関数は、アニメーションのスピード曲線を指定しており、滑らかで自然な動きにするために使われます。
カスタマイズ例
.fixed-textのpositionとtransform
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);これにより、ボタン内でテキストが正確に中央に配置されます。translate(-50%, -50%)は、要素を自分自身の50%の位置に移動させることで、正確に中央に配置します。
カスタマイズ例
背面デザインの追加
.rotating-box::before {
content: '';
position: absolute;
background: #fff;
transform: rotateX(180deg);
backface-visibility: hidden;
border: solid 1px #000;
}:beforeを使って、回転する要素の背面にデザインを追加します。これにより、回転時に背面の背景や境界線を表示できます。backface-visibility: hidden;は、裏面が表示されないようにするためのプロパティです。
カスタマイズ例
.button-3d-container:hover .fixed-textの色変更
.button-3d-container:hover .fixed-text {
color: #000;
}ホバー時にボタンのテキスト色を変更しています。これにより、インタラクション時に視覚的に変化を加えます。
カスタマイズ例
まとめ
今回は、ホバーで回転する3Dリンクボタンの実装方法をご紹介しました。
このボタンは、transform-style: preserve-3d や perspective といったCSSプロパティを活用して、立体的で印象的なアニメーションを作り出しています。表と裏の面を切り替えることで、まるでカードが裏返るような動きが表現でき、ユーザーの注目を集めるリンクボタンに仕上がります。
カスタマイズのポイントとしては、
といった部分を編集することで、独自のスタイルに仕上げることができます。
