css3绘制3D图形——圆锥、圆柱、柱状图

7,912 阅读1分钟

1.柱状图

柱状图拆分来看的话,是由两个平行四变形和一个矩形组成,如下:

为了让柱状图更加美观,我们加上阴影、和渐变色、缓慢上升的效果:

效果图代码链接: pen/KKKEQvy

2.圆柱

圆柱的话就相对比较简单,由两个椭圆和一个矩形组成,同时我们给他加上渐变色加深立体感,如下:

效果图代码链接: pen/LYYaQOK

3.圆锥

侧边视角圆锥

是由两个三角形组成,如下:

为了更直观立体,我们增加阴影和一条光线:

效果图代码链接: pen/pooYaWp

上方圆锥视图

从上方查看圆锥,是由三个三角形组成,这里我们说两种写法

  • 第一种主要是由两个直角三角形和一个等边三角形构成

为了视觉的立体感我们在图片定位一线光条,底部的线条是两个三角形叠加形成的

  • 第二种是由由两个水平方向翻转的直角三角形和一个等边三角形组成(也可以同上加上光线增加视觉效果)

效果图代码链接: pen/GRReQQZ

3.三角形柱状图

由两个矩形形和一个三角形组成(矩形和三角形都是通过水平或者垂直方向的翻转得来)

效果图代码链接: pen/pooYadp