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

翻转动画是流行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添加基本样式

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

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

.flipBtn,
.flipBtn_face {
  width: 100%;
  height: 100%;
  position: absolute;
}
3.设置3个按钮面的样式

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

中间面.flipBtn_midheight为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。

旋转前的3D按钮
按钮
4.旋转按钮

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

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

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

旋转3D按钮
按钮旋转-120°

但是,在下一步中,我们将其更改为-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上触发动画,这样,动画的行为就更像是真实的按钮。 我还提供了具有四个翻转方向的四个不同按钮(“顶部”→“底部”,“底部”→“顶部”,“右”→“左”和“左”→“右”),以便您可以随意使用任何按钮。


翻译自: https://www.hongkiat.com/blog/css-3d-button-flip-animation/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值