使用 CSS 的 3D 按钮

CSS 提供了一种在网页上创建和设计按钮的方式，根据设计者的需求和喜好可以自由地改变其外观和交互方式。其中，3D 按钮是一种很有趣的设计方式，它可以让按钮看起来有立体感，给用户更具体、更真实的视觉体验。

创建 3D 按钮

要创建 3D 按钮，我们可以利用 CSS 的变换（Transform）属性，其中旋转（rotate）和透视（perspective）是关键。以一个红色的立方体按钮为例：

/*父元素*/
.button {
  perspective: 800px; /*设置透视*/
  display: inline-block;
}

/*子元素*/
.button__cube {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(45deg) rotateX(30deg);

  /*立方体的六个面*/
  .button__face {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
  }

  /*正面和背面*/
  .button__front,
  .button__back {
    background-color: red;
  }

  /*左右面*/
  .button__left,
  .button__right {
    background-color: #9d0208;
  }

  /*上下面*/
  .button__top,
  .button__bottom {
    background-color: #f36d22;
  }

  /*给立方体添加阴影*/
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/*鼠标悬浮时的效果*/
.button:hover .button__front {
  transform: translateZ(25px);
}

.button:hover .button__back {
  transform: rotateY(-180deg) translateZ(25px);
}

.button:hover .button__left {
  transform: rotateY(-90deg) translateZ(25px);
}

.button:hover .button__right {
  transform: rotateY(90deg) translateZ(25px);
}

.button:hover .button__top {
  transform: rotateX(-90deg) translateZ(25px);
}

.button:hover .button__bottom {
  transform: rotateX(90deg) translateZ(25px);
}

上面的代码中，.button 是 3D 按钮的父元素，.button__cube 是立方体按钮的容器，.button__face 是立方体的六个面，其中 .button__front 是正面，.button__back 是背面，.button__left 是左面，.button__right 是右面，.button__top 是上面，.button__bottom 是下面。

鼠标悬浮时，我们可以通过变换来让按钮的各个面分别做出不同的动作，从而产生立体感和动感，如上面的代码中 :hover 伪类所示。

总结

使用 CSS 的 3D 按钮需要掌握一些基本的变换技巧，如旋转和透视，以及对立体对象的各个面的控制和变换。同时，还需要注意如何让按钮在不同状态下呈现出不同的外观和效果。在实际项目中，可以根据需要改变 3D 按钮的样式和动作，以适应具体的设计场景。