CSS 3D技術讓我們可以輕松地創建出逼真的3D人物效果,而不需要使用任何的Flash或者JavaScript等其他技術。
.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視距下實現。
上一篇css彈幕墻設計
下一篇css 30磅 多少像素