使用Flexbox结合CSS transform可实现卡片旋转排列。先用display: flex让卡片居中对齐，再通过transform: rotate()为每个.card设置不同旋转角度（如-30deg到30deg），形成扇形布局。配合transform-origin和绝对定位可实现环形排列，添加transition可增强交互效果。
想让一组卡片以旋转方式排列在容器中，比如围绕中心点呈扇形或环形分布，可以结合 Flexbox 的布局能力和 CSS transform 实现。虽然 Flexbox 本身不支持弧形排列，但通过灵活运用 transform: rotate() 和子元素的定位调整，能轻松实现视觉上的旋转排列效果。
1. 使用 Flexbox 布局基础结构
先用 Flexbox 将卡片水平或垂直排列，作为基础布局。这样能确保卡片自动对齐、间距均匀，便于后续单独控制每个卡片的旋转角度。
.container {display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
} .card {
width: 120px;
height: 180px;
background: #3498db;
color: white;
text-align: center;
line-height: 180px;
margin: 0 15px;
border-radius: 10px;
position: relative;
}
2. 对每个卡片应用不同的旋转角度
利用 transform: rotate() 让每个卡片围绕容器中心轻微旋转，形成扇形展开的视觉效果。关键是将旋转中心设为容器中心，可通过 transform-origin 控制。
示例：让5张卡片以 ±30° 范围展开
立即学习“前端免费学习笔记（深入）”；
.card:nth-child(1) { transform: rotate(-30deg); }.card:nth-child(2) { transform: rotate(-15deg); }
.card:nth-child(3) { transform: rotate(0deg); }
.card:nth-child(4) { transform: rotate(15deg); }
.card:nth-child(5) { transform: rotate(30deg); }
若希望所有卡片围绕一个中心点旋转（如圆弧排列），可将容器设为相对定位，卡片使用绝对定位并配合 translate 移动到圆周上，再加 rotate。
3. 结合 transform-origin 实现自然旋转
默认情况下，transform 以元素自身中心旋转。如果想让卡片像指针一样绕容器中心旋转，需调整 transform-origin 到外部参考点。
更高级的做法是：
- 将 .container 设为相对定位
- 设置卡片 position: absolute
- 用 JavaScript 或手动计算每个卡片在圆上的位置（left, top）
- 再对每个卡片设置 rotate(angle)，使其朝向圆心或呈放射状
4. 简化实现：伪扇形排列（推荐初学者）
不需要复杂计算时，只需视觉上“看起来”是旋转排列，直接在 flex 排列基础上给每个卡片加不同 rotate 值即可。
技巧提示：
- 保持 margin 一致，避免旋转后重叠
- 使用 transition 添加旋转动画：transition: transform 0.3s ease
- 鼠标悬停时动态旋转：.card:hover { transform: rotate(10deg); }
基本上就这些。Flexbox 负责整齐排布，transform 负责视觉变形，两者结合能创造出丰富的卡片布局效果，包括旋转、倾斜、层叠等。不复杂但容易忽略的是 transform-origin 和定位的配合使用。
