css 3d人物 |vue cli使用postcss

.container {
perspective: 800px; /* 视距，必须加在基本块元素上 */
}
.human {
width: 200px;
height: 400px;
background: #F8C471;
position: relative;
transform-style: preserve-3d; /* 子元素继承 3D 效果 */
transform: rotateY(45deg);
}
.head {
width: 100%;
height: 100px;
background: #EC7063;
position: absolute;
top: 0;
left: 0;
transform-origin: center bottom; /* 以底部为中心点 */
transform: rotateX(90deg);
}
.face {
width: 100%;
height: 80%;
background: #F7DC6F;
position: absolute;
bottom: 0;
left: 0;
transform-origin: center top; /* 以顶部为中心点 */
transform: translateY(-50%);
}
.eye {
width: 20px;
height: 20px;
background: #fff;
position: absolute;
top: 50px;
left: 50px;
border-radius: 50%;
transform-origin: center;
animation: eye-move 2s infinite;
}
/* 眼睛的动画效果 */
@keyframes eye-move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(-10px, -10px);
}
50% {
transform: translate(0, 0);
}
75% {
transform: translate(10px, -10px);
}
100% {
transform: translate(0, 0);
}
}
.nose {
width: 20px;
height: 20px;
background: #A569BD;
position: absolute;
top: 70px;
left: 50%;
border-radius: 50%;
transform-origin: center;
transform: translateX(-50%);
}
.mouth {
width: 50px;
height: 20px;
background: #EC7063;
position: absolute;
bottom: 10px;
left: 50%;
transform-origin: center;
transform: translateX(-50%) rotateX(180deg);
}

以上代码是一个简单的CSS 3D人物效果，通过对每一个部位的定位和旋转等操作，使其能够呈现出三维的效果。

同时，大家可以通过CSS的动画效果，让人物的眼睛动起来，增强其真实感，这一切都是在恰当的3D视距下实现。