在网页设计中，常规的div大多是矩形，视觉上比较单调。借助CSS3D变换，我们可以让div在三维空间里旋转、倾斜，从而呈现出不规则的个性化外形。这种方式不依赖图片，纯样式即可实现。
一、CSS3D变换的核心属性
要实现不规则div，首先需要理解几个关键属性：
- perspective：定义观察者与z等于0平面的距离，决定3D效果的透视强度。
- transform：通过rotateX、rotateY、rotateZ等函数对元素进行三维旋转。
- transform-style：设为preserve-3d可让子元素保留3D位置。
二、基础代码结构
下面用一个简单示例展示如何让一个div产生不规则倾斜效果：
/* 容器设置透视 */
.scene {
perspective: 800px;
width: 300px;
height: 200px;
}
/* 不规则div */
.shape {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #6a89cc, #4a69bd);
transform: rotateX(15deg) rotateY(-20deg) rotateZ(5deg);
transform-origin: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
三、利用多个面拼出复杂不规则体
如果希望div看起来像被切割的不规则块，可以用多个子元素分别旋转组合：
<div class="scene">
<div class="box">
<div class="face front"></div>
<div class="face side"></div>
</div>
</div>
.scene {
perspective: 1000px;
}
.box {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: rotateX(10deg) rotateY(15deg);
}
.face {
position: absolute;
width: 200px;
height: 200px;
}
.front {
background: #e55039;
transform: translateZ(50px) skewY(10deg);
}
.side {
background: #eb2f06;
transform: rotateY(90deg) translateZ(50px) skewX(-15deg);
}
四、注意事项
使用CSS3D变换打造不规则div时，有几点需要留意：
- 父级必须设置perspective，否则子元素只是平面旋转。
- rotateZ配合skew可制造歪斜的不规则边缘，但不要过度以免内容难读。
- 在低端移动设备上加3D变换可能耗性能，建议控制图层数量。
合理组合transform函数，就能用纯CSS做出极具个性的不规则div，而无需额外图形资源。