谁敢把我装桶里来着？

代码：

<div id="circle_3d_thick" class="circle_3d_thick rotated"></div>

原理

1. 150*150px的方块，自己 position:relative，border-radius:100%
2. 然后 :before :after 插入两个 position:absolute 方块 A（before） B(after)
3. A 是桶底。transform:translateZ(-75px) 向 z 方向挪动 75;
4. B 担任侧面。比较罗嗦 rotateX(90deg) translateY(-1@circle_size/2) translateZ(-1@circle_size/2) 首先旋转（因为是侧面嘛），然后往中间挪动（根本不是曲面，就是平面，所以要放在圆心上）
5. 打酱油的阴影是 jquery append 进去的。z 方向 85 然后 box-shadow 几次(温柔点的阴影)。

源代码

js 引入 jquery ui slider，是为了方便查看桶的侧面。我写的时候是 less 和 coffee。当然，你也可以直接查看 css 和 js。