HTML 3d盒子翻转案例_办公知识

HTML 3d盒子翻转案例

admin

2023-09-16 03:33:59

0次

文章图片

文章图片

上节课我们已经学习了3d相关的知识了，今天我们就通过学习的3d知识，做两个案例。
1.HTML 3d盒子翻转案例我们要实现的效果是，当鼠标经过下面的盒子时，盒子进行翻转到另一面。

2.3d盒子翻转案例解题思路：1）首先我们用一个大盒子装两个小盒子，这两个小盒子用来显示效果。

2）我们将大盒子的宽度和高度以及外边距设置好：

3）我们将两个小盒子设置宽度和高度与大盒子一致，由于我们最终想要实现的效果是两个圆形，因此需要设置边框的角度和文字水平、垂直居中对齐：

4）由于这两个盒子时叠放在一起的，因此我们利用定位，这样两个盒子就叠放到了一起：

【HTML 3d盒子翻转案例】5）将两个小盒子分别设置不同的背景颜色，并为了调整两个盒子的显示顺序，我们通过z-index来设置：
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

6）我们希望得到的效果是，当鼠标经过盒子时，前面盒子旋转到后面盒子位置，后面盒子旋转到前面盒子位置，因此需要将两个盒子背对背显示，这样在进行旋转的时候后面盒子的文字才能正常显示，因此需要将后面的盒子沿着y轴旋转180度：

7）设置大盒子鼠标经过图像沿着y轴旋转180度，这样才能实现两个盒子旋转的效果：
8)由于大盒子设置了旋转的效果，会将小盒子的旋转效果覆盖因此需要将大盒子设置3d呈现效果：

9）为了更加明显的注意到旋转的效果，因此将大盒子设置过渡：

10）可能在设置完成后需要闪屏的效果，因此需要将两个小盒子设置backface-visibility属性定义当元素不面向屏幕时是否可见。

HTML 3d盒子翻转案例

文章图片

上一篇：龚俊代言！荣耀60新版本发布，女神节专属“会变色”的机身？

下一篇：微软|如何正确地升级Win11？三个方案任你选择，老电脑也没问题

HTML 3d盒子翻转案例

相关内容

热门资讯