button 元素的css3旋转动画

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

转载于:https://www.cnblogs.com/aryu/p/css.html