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 blockli: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或者其他元素来代替伪元素的实现，因为伪元素无法绑定点击事件