CSS

CSS3D世界,纯CSS如何绘制三棱锥

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

非常抱歉,断更了半年,原因也是有很多,疫情期间在老家也是没有电脑,上班后非常的忙,种种原因吧。

让小伙伴们久等了,非常抱歉!后续还是保持正常更新,不辜负小伙伴们的信任。

下面还是回归今天的主题:CSS如何制作三棱锥?

结构

三棱锥,大家看图,应该能看到它共有4个面,分别是3个侧面,1个底面。我们将其细分为,前面、左面、右面和底面。用html表示如下:

<ul class="cones-inner">
  <li class="front"></li>
  <li class="right"></li>
  <li class="left"></li>
  <li class="bottom"></li>
</ul>

逐个击破

CSS三角形

每个面都是一个三角形,下面我们用CSS制作一个三角形,之前有很多文章都有写过,今天还是再写一次。

width: 0;
height: 0;
border-top: 100px solid black;
border-right: 100px solid red;
border-left: 100px solid blue;
border-bottom: 100px solid green;

大家看,给一个div设置不同的边颜色,就会组成如上图的图形。这样我们就可以画出一个三角形了,比如上、左、右都是透明色,就一会看到底边的绿色了。

width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-bottom: 100px solid green;

OK,下面运用到我们三棱锥上面

CSS三棱锥的组成

.cones-inner {
  position: absolute;
  display: block;
}
.cones-inner li {
  position: absolute;
  list-style: none;
  top: 0;
  z-index: 10;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid rgba(80,80,80,.7);
}

这里,其实有4个三角形,不过每个都重叠在一起了,用了绝对定位。

一、右侧面

.cones-inner .left {
  border-bottom: 100px solid rgba(120,120,120,.7);
  transform: rotate3d(1, 1.732, 0, -70.5deg);
}

transform: rotate3d(x, y, z, angle);

参数解析:

(1).x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值。

(2).y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值。

(3).z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值。

(4).angle:一个角度值,指定在3D空间旋转角度,正值顺时针旋转,反之元素逆时。

接着,咱们改变右侧面的位置,使其顶角重合。

.cones-inner .left {
  border-bottom: 100px solid rgba(120,120,120,.7);
  transform: rotate3d(1, 1.732, 0, -70.5deg);
  transform-origin: 75% 50%;
}

transform-origin: x-axis y-axis z-axis;

transform-origin 属性允许您改变被转换元素的位置。定义视图被置于 X/Y/Z 轴的何处。

二、同理制作出其他几个面

.cones-inner .front {
  border-bottom: 100px solid rgba(80,80,80,.7);
  transform: rotate3d(-1, 1.732 , 0, 70.5deg);
  transform-origin: 25% 50%;
}
.cones-inner .right {
  border-bottom: 100px solid rgba(160,160,160,.7);
  transform: rotate3d(1, 0, 0, 70.5deg);
  transform-origin: 50% 100%;
}

是不是觉得少了点什么?

底面没有提到,对的。底面上面默认值有些了。li里面的border-bottom就可以作为底面了,当然,也可以重新写啦

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

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

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

(70)

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

热评文章

发表评论

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