css3之3D按钮的实现

一、思路

（1）将按钮的样式分为两部分：变化前和变化后
（2）分别用伪元素::after和::before分别来展示变化前和变化后的样式
（3）变化前，需要显示的部分是::after伪元素中的样式(transform:rotateX(0deg) translateY(0%)),则需要将::before伪元素的样式隐藏(transform:rotateX(90deg) translateY(-50%)
（4）变化后，需要显示的是::before伪元素中的样式(transform:rotateX(0deg) translateY()%)),则需要将::after伪元素中的样式隐藏起来（transform:rotateX(-90deg) ranslateY(50%)）
(5)调节变化时间：transition:0.5 all
(6)在变化的时候，就会产生视觉差，产生一种3D按钮的感觉

下面一起来看看代码：

// 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%);

!!!注意：

若要处理点击事件，可以选择两个span或者其他元素来代替伪元素的实现，因为伪元素无法绑定点击事件