button 元素的css3旋转动画

本站寻求有缘人接手，详细了解请联系站长QQ1493399855

html： 利用伪元素

<button class="btn btn-default btn-lg btn-3d" type="submit" data-hover="SUBMIT REQUEST">
"SUBMIT REQUEST"
</button>

css:

.btn-3d {position: relative;perspective: 800px;transition: background 0.6s;transform-origin: 50% 0;transform-style: preserve-3d;
}.btn-3d::before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: red;border-radius: inherit;color: inherit;content: attr(data-hover);   //绑定hover事件transform: rotateX(270deg);  //css旋转270度transition: transform 0.6s;   //过渡效果transform-origin: 0 0;      //css旋转轴pointer-events: none;padding: inherit;font: inherit;
}