css制作模型

使用CSS制作模型

CSS可以用来创建各种3D模型效果，通过transform属性和perspective属性实现立体感。

基础立方体模型

<div class="cube">
  <div class="face front"></div>
  <div class="face back"></div>
  <div class="face left"></div>
  <div class="face right"></div>
  <div class="face top"></div>
  <div class="face bottom"></div>
</div>

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(20deg) rotateY(30deg);
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  border: 2px solid #000;
}

.front {
  background: red;
  transform: translateZ(100px);
}

.back {
  background: blue;
  transform: translateZ(-100px);
}

.left {
  background: green;
  transform: rotateY(-90deg) translateZ(100px);
}

.right {
  background: yellow;
  transform: rotateY(90deg) translateZ(100px);
}

.top {
  background: purple;
  transform: rotateX(90deg) translateZ(100px);
}

.bottom {
  background: orange;
  transform: rotateX(-90deg) translateZ(100px);
}

3D旋转动画效果

.cube {
  animation: rotate 5s infinite linear;
}

@keyframes rotate {
  from { transform: rotateX(0) rotateY(0); }
  to { transform: rotateX(360deg) rotateY(360deg); }
}

透视效果增强

body {
  perspective: 1000px;
  perspective-origin: 50% 50%;
}

复杂形状模型

对于更复杂的模型，可以使用CSS clip-path属性创建多边形：

.polygon {
  width: 200px;
  height: 200px;
  background: #3498db;
  clip-path: polygon(
    50% 0%, 
    100% 50%, 
    50% 100%, 
    0% 50%
  );
}

响应式模型设计

使用CSS变量和calc()函数确保模型在不同屏幕尺寸下的适应性：

:root {
  --cube-size: min(200px, 30vw);
}

.cube {
  width: var(--cube-size);
  height: var(--cube-size);
}