3d翻转动画css3_如何使用CSS创建3D按钮翻转动画

最新推荐文章于 2022-11-02 16:22:26 发布

cune1359

最新推荐文章于 2022-11-02 16:22:26 发布

阅读量560

点赞数

文章标签：定位 css css3 html html5

翻转动画是流行CSS效果，通过从顶部到底部或从左到右（反之亦然）显示HTML元素的正面和背面 。它们具有二维尺寸，但是以3D执行时它们甚至更冷。

在这篇文章中，我将向您展示如何创建简单的3D按钮 ，以及如何向其中添加翻转动画 。

您可以在下面的演示中看到结果，如果您单击按钮，它们将执行标记的翻转动画。

1.为3D按钮创建HTML

要创建3D按钮（使用“顶部”→“底部”翻转），首先我们将三个<div>彼此堆叠，两个用于按钮的正面和背面，第三个用于填充中间的深度。我们将三个按钮面放入将用作3D按钮的.flipBtn容器中，然后将3D按钮放入.flipBtnWrapper包装器中。

<div class="flipBtnWrapper">
  <div class="flipBtn">
    <div class="flipBtn_face flipBtn_back"></div>
    <div class="flipBtn_face flipBtn_mid"></div>
    <div class="flipBtn_face flipBtn_front"></div>
  </div>
</div>

2.使用CSS添加基本样式

我们设置包装纸，按钮和按钮表面的width和height属性，并使用相对/绝对定位技术对其进行定位。

.flipBtnWrapper {
  width: 200px;
  height: 200px;
  position: relative;
}

.flipBtn,
.flipBtn_face {
  width: 100%;
  height: 100%;
  position: absolute;
}

3.设置3个按钮面的样式

我们将背景图像添加到按钮的正面和背面，并在两个图像的背面设置很酷的线性渐变。这里的窍门是，在CSS中，您可以将多个图像设置为同一元素的背景图像，还可以将渐变声明为背景图像。

中间面.flipBtn_mid的height为20px，并且在正面和背面之间创建了20px的相同空间。我们通过使用translateZ() CSS函数沿z轴移动元素来实现后者。我们将背面向后推10px，将正面向前推10px。

.flipBtn_front {
  background-image: url("image/css-3d-flip-button-animation-play.png"),
                    linear-gradient(#FF6366 50%, #FEA56E);
  backface-visibility: hidden;
  transform:  translateZ( 10px );
}

.flipBtn_back {
  background-image: url("image/css-3d-flip-button-animation-pause.png"),
                    linear-gradient(#FF6366 50%, #FEA56E);
  background-color: blue;
  transform:  translateZ( -10px );
}

.flipBtn_mid {
  height: 20px;
  background-color: #d5485a;
  transform: rotateX(90deg);
  top: -10px;
}

为了用中间的表面覆盖正面和背面之间的空间 ，我们使用以下transform: rotateX(90deg); 将中间面平放在3D空间的x平面上transform: rotateX(90deg); 使其垂直于y平面上的前后按钮面的规则。

由于中间面在x平面上平放，因此其在y轴上的最高点比原始点低10px（高度的一半）。因此，要将其拉回并使其顶部与其他两个按钮面对top: -10px ，我还添加了top: -10px规则。

我为正面使用了backface-visibility CSS属性，因此当我们按下按钮时，正面的背面将不可见。

到目前为止，您将只在屏幕上看到正面，因为x平面从视图中隐藏了，而在y平面（屏幕）上，最后放置的面是正面。 通过旋转按钮，您也可以看到其他面Kong。

4.旋转按钮

转换样式的 CSS属性确定HTML元素的子元素是平坦显示还是位于3D空间中。在下面的代码段中， transform-style: preserve-3d; 规则为按钮提供3D体积，而transform: rotatexX()属性可将其绕x轴旋转。

.flipBtn {
  transform-style: preserve-3d;
  transform: rotateX( -120deg);
}

请注意，我仅将-120deg用于演示目的，因为这样可以更轻松地说明按钮旋转的工作方式。

但是，在下一步中，我们将其更改为-180deg以使按钮完全翻转。

5.动画按钮

此时，我们的3D按钮仍然没有动画。我们可以通过使用transition属性来做到这一点。我们将transform属性用作第一个值，因为这是我们要为其应用过渡效果的属性。第二个值是持续时间2s 。

让我们使按钮仅在悬停时旋转，因此让我们使用.flipBtnWrapper:hover .flipBtn而不是.flipBtn选择器。如前所述，还可以将-180deg rotateX()的值更改为-180deg以使按钮翻转。

.flipBtn {
  transition: transform 2s;
  transform-style: preserve-3d;
}

.flipBtnWrapper:hover .flipBtn {
  transform: rotateX( -180deg);
}

请注意，在Github存储库中，我向每个按钮添加了一个复选框 ，以便在:checked而不是:hover上触发动画，这样，动画的行为就更像是真实的按钮。我还提供了具有四个翻转方向的四个不同按钮（“顶部”→“底部”，“底部”→“顶部”，“右”→“左”和“左”→“右”），以便您可以随意使用任何按钮。