css制作立体柱子

使用CSS制作立体柱子

通过CSS的transform、box-shadow和渐变背景可以实现立体柱子的效果。以下是几种常见方法：

基础3D柱子

利用skew和rotate变换模拟透视效果：

.column {
  width: 60px;
  height: 200px;
  background: linear-gradient(to bottom, #3498db, #2980b9);
  transform: perspective(500px) rotateX(30deg);
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

带光影效果的柱子

通过多重阴影和渐变增强立体感：

.column-3d {
  width: 80px;
  height: 250px;
  background: 
    linear-gradient(90deg, 
      #2c3e50 0%, 
      #34495e 20%, 
      #7f8c8d 50%, 
      #34495e 80%);
  transform: perspective(300px) rotateX(25deg);
  box-shadow: 
    3px 3px 0px rgba(0,0,0,0.2),
    6px 6px 0px rgba(0,0,0,0.1),
    inset -5px 0 10px rgba(0,0,0,0.4);
}

圆柱体效果

使用径向渐变和椭圆变形：

.cylinder {
  width: 100px;
  height: 200px;
  background: 
    radial-gradient(ellipse at center, 
      #bdc3c7 0%, 
      #95a5a6 70%);
  border-radius: 50%/10%;
  box-shadow: 
    0 0 10px rgba(0,0,0,0.5),
    inset 0 0 20px rgba(255,255,255,0.2);
}

带顶面的柱子

通过伪元素添加立体顶面：

.pillar {
  position: relative;
  width: 70px;
  height: 180px;
  background: linear-gradient(to right, #e74c3c, #c0392b);
}

.pillar::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 20px;
  background: #c0392b;
  transform: skewX(-30deg);
}

这些方法可以通过调整颜色、尺寸和变换参数来创建不同风格的立体柱子效果。建议在实际使用时配合动画或悬停效果增强交互体验。