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属性定义当元素不面向屏幕时是否可见 。
相关内容
热门资讯
大浪淘金APP黑幕揭秘：内盘操...
大浪淘金APP平台最隐蔽的黑幕，在于其完全封闭的内盘交易系统。这个看似与国际市场接轨的交易平台，...
告别固定工资实现财富自由？一品...
普通投资者被广告宣传诱导，注册就送现金，充值返现金券等等这些宣传方式，都是在引流到平台开户，不怕...
哈易购APP打着现货交易幌子搞...
网络上各类白银、铂金等贵金属投资广告铺天盖地，不少平台以"现货交易"为名，暗中却从事着非法期货交...
5元起投！高额收益？中国白银、...
上海华通白银国际交易中心有限公司（以下简称“华通白银国际”）打着“白银、铂金现货订购”的旗号，实...
"九州订购APP、起...
近年来，贵金属投资热度持续攀升，但乱象也随之而来。一些不法分子趁机搭建虚假交易平台，打着"低门槛...
坚锅淘金APP投资者频繁爆仓亏...
坚锅淘金APP对外宣称是贵金属现货交易平台，日常出入金看似畅通无阻，给人一种合规运营的假象。但事...
斗金订购APP“5元订购现货”...
斗金订购APP“5元订购现货”骗局揭秘：充值易、回本难，越陷越深！ 许多投资人在未核实平台合规...
贵金属APP乱象曝光：&quo...
当前市场上部分贵金属类APP未取得正规交易资质，涉嫌误导消费者参与白银、铂金等商品的非合规交易！...
华通白银、银宝街APP被指虚假...
警惕现货白银投资陷阱：上海华通白银背后的平台涉嫌非法期货交易 近年来，各类现货白银交易平台以“...
充值送300，月入过万？别被量...
如今，网络上充斥着大量未经批准的贵金属及其他产品订购交易平台。这些平台普遍缺乏合法经营资质，却将...
鑫汇智投APP贵金属非法期货、...
鑫汇智投APP贵金属非法期货、人为控盘，大量投资者遭恶意收割 鑫汇智投APP长期以“低门槛、高...
矅光智策APP非法贵金属交易骗...
不少投资人在矅光智策APP上进行贵金属交易后出现了严重亏损。许多人在下载该平台时，根本不清楚其是...
飞鸽订购APP非法期货交易骗局...
飞鸽订购APP非法期货交易骗局，很多投资者根本没搞懂规则就盲目充值，买涨买跌跟买cai票一样！平...
天龙白银APP被操控的非法期货...
中小投资者在网络平台参与商品现货订购交易，表面看似合规合法，实则暗藏诸多难以察觉的风险。商品现货...
下载送试玩金？千万别碰！带你揭...
当前，许多贵金属APP交易平台正采用欺诈性营销手段。它们通过抖音等短视频平台，以“5元起投”“充...
泡泡淘金APP骗局：打着&qu...
泡泡淘金APP骗局：打着"商品订购"幌子，实则非法期货收割投资者！投资需谨慎，切勿轻信“高额回报...
南商云购APP虚假电子盘背后的...
南商云购是虚假电子盘吗？它是否具备合规的交易资质？这个曾经的"现货电子盘"如今摇身一变，披上了"...
警惕"祥龙订购&qu...
祥龙订购APP、掌上银牛APP等平台背后的运营方——四川禄宏商品现货市场有限公司，仅具备现货交易...
中国白银、华银：虚假宣传、后台...
中国白银APP宣称是上市公司“中国白银集团”与“上海华通白银国际交易中心”旗下的现货交易平台，提...
起底“优品订购”APP非法期货...
“优品订购”APP根本不具备任何合法的交易资质。其背后的运营方仅凭随便注册一家公司、开发一款交易...