css 3の3 Dボタンの実現

一、考え方
(1)ボタンのスタイルを2つの部分に分ける:変化前と変化後(2)それぞれ擬似要素::afterと::beforeで変化前と変化後のスタイルをそれぞれ示す(3)変化前、表示する必要がある部分は:after擬似要素のスタイル(transform:rotateX(0 deg)translateY(0%)、before擬似要素のスタイルを隠す(transform:rotateX(90 deg)translateY(-50%)(4)変化後、表示する必要があるのは:beforeダミーエレメントのスタイル(transform:rotateX(0 deg)translateY()%))、afterダミーエレメントのスタイルを隠す必要がある(transform:rotateX(-90 deg)ranslateY(50%)(5)変化時間を調整する:transition:0.5 all(6)変化すると視覚差が発生し、3 Dボタンのような感じがします
コードを見てみましょう.

// An highlighted block
li:before {
content: attr(data-attr);
position: absolute;
top: 0; .
left: 0;
width: 84px;
height: 34px;
line-height: 34px;
font-size: 14px;
color: #ff;
background: linear-gradient(90deg, #454e93, #ft7b4d);
transform-origin: top;
transform: rotateX(90deg) translateY(-50%);
transition: 0.5s all;
li:after {
content: atr(ata-attr);
position: absolute;
top: 0;
left: 0;
width: 80px; .
height: 30px;
background-color: #ff;
font-family: "STKaiti";
font-size: 16px; ，
font- weight: 700;
color: transparent;
background: linear-gradient(90deg, #454e93, #f7b4d);
background-clip: text;
border: 2px solid #000;
border- image: linear-gradient(to right, #454e93, #f7b4d) 1;
transform-origin: bottom;
transform: rotateX(0deg) translateY(0%);
transition: 0.5s all;
li:hover:before {
transform: rotateX(0deg) translateY(0%);
li:hover:after {
transform: rotateX( 90deg) translateY(50%);

!!!注意:
クリックイベントを処理するには、ダミー要素の実装の代わりに2つのspanまたは他の要素を選択します.ダミー要素はクリックイベントをバインドできないためです.