创建 3D 效果是网页设计中最苛刻的需求之一。在本文中,我们将学习使用简单的 HTML 和 CSS实现 3D 翻转按钮动画效果。在此效果中,每当用户将鼠标悬停在按钮上时,它将显示具有 3D 外观的翻转动画。
HTML 代码:在本节中,我们将使用锚标记,并使用 CSS 来设计按钮。
CSS 部分:在本部分中,我们将使用一些 CSS 属性来创建 3D 效果。
transform-style属性用于定义效果应保留 3D 定位,以便效果看起来正确。 :hove r 选择器可用于选择超链接并使用转换属性。 rotateX()值用于在按钮悬停时旋转按钮。
CSS 代码:
CSS
完整代码:在本节中,我们将结合以上两个部分来创建一个完整的效果。
HTML
输出: