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

總結

以上是生活随笔為你收集整理的button 元素的css3旋转动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。