CSS

CSS 3D世界,360°旋转水晶魔方

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

你家有类似的水晶魔方吗?我第一次见到它的时候,就觉得这个东西真不错,所以我家现在有2个。不过一个已经坏掉了,坐车放在箱子里面,颠簸导致水晶的四个角都破损了,大家如果要携带一定要小心哦。

现在我们来制作一个永远不会破损的水晶魔方,用代码实现,要不代码出bug,永远不坏。

CSS3实现水晶魔方效果。

结构

水晶是一个正方体,所以有6个面,用html表示如下:

<ul class="cube-inner">
  <li class="top"></li>
  <li class="bottom"></li>
  <li class="left"></li>
  <li class="right"></li>
  <li class="front"></li>
  <li class="back"></li>
</ul>

逐个击破

每个面都是一个正方形,所以我们对6个面用统一样式

.cube-inner {
  position: relative;
  margin: 200px auto;
  width: 100px;
}
.cube-inner li {
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  background: red;
}

这样每个6个面都重叠在一起了,我们用transform,改变每个面的在空间上的位置。

在设置每个面之前,我们先使其整个魔方元素在3D空间呈现(transform-style: preserve-3d),并旋转一下,看起来更方便。

.cube-inner {
  position: relative;
  margin: 200px auto;
  width: 100px;
  transform-style: preserve-3d;
  transform: rotateX(-33.5deg) rotateY(45deg);
}

正面

.cube-inner .front {
  transform: translateZ(50px);
  background: blue;
}

上面

.cube-inner .top {
  transform: rotateX(90deg) translateZ(50px);
  background: green;
}

更多精彩内容,可以点击“立即支付”,查看隐藏内容哦!

资源下载价格1立即支付    升级VIP后免费升级VIP
本站资源一次收费,永久下载!发现资源失效,联系站长恢复即可!由于源码具有可复制性、可传播性,一经购买,概不退货,购买前请再三确认!本站提供相关技术支持,网站底部联系即可。时间:周一 ~ 周五 9:30-18:00。谢谢合作!

VIP用户所有收费资源免费,登录后左上角点击 昵称 ,进入用户中心充值成为VIP会员!如果您已经登录,点击这里成为尊贵VIP用户!

(53)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注