在CSS中,我們可以使用3D變換來制作3D動漫人物。以下是一個簡單的示例,其中我們使用CSS屬性transform和perspective來創建3D效果。
.person { perspective: 500px; transform-style: preserve-3d; } .head { position: relative; transform-origin: bottom center; transform: rotateX(-20deg); } .eyes { position: absolute; top: 20px; left: 30px; width: 40px; height: 40px; border-radius: 50%; background-color: white; transform: rotateY(20deg); box-shadow: -10px 0 0 black, 10px 0 0 black; } .nose { position: absolute; top: 70px; left: 70px; width: 10px; height: 10px; border-radius: 50%; background-color: red; transform: rotateZ(45deg); } .mouth { position: absolute; top: 100px; left: 30px; width: 80px; height: 20px; background-color: white; border-radius: 20px; transform: rotateZ(10deg); } .body { position: relative; top: 100px; width: 100px; height: 100px; background-color: blue; transform: translateZ(50px); }
在這個示例中,我們首先將整個人物的父級容器(div.person)進行了3D變換的設置,以創建透視效果。然后,我們將頭部(div.head)進行了X軸方向上的旋轉,并設置了旋轉中心為底部中心。
接著,我們創建了眼睛(div.eyes),應用了Y軸方向上的旋轉,并設置了投影(box-shadow)以創建陰影效果。我們還創建了鼻子(div.nose)和嘴巴(div.mouth),分別應用了Z軸方向上的旋轉,并使用了不同的顏色和尺寸。
最后,我們創建了身體(div.body),并使用了translateZ屬性來使其在Z軸方向上移動,以創建距離感。通過這些設置,我們成功地創建了一個簡單的3D動漫人物。