button 元素的css3旋转动画

html： 利用伪元素

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

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;
}