CSS3人立方,是一種用于將2D圖形變換為3D立方體的技術。它可以讓網站表現得更加生動,增加用戶交互性。以下是一個簡單的例子:
.cube{ width: 300px; height: 300px; position: relative; transform-style: preserve-3d; animation: rotate 10s linear infinite; } .cube .cube-face{ position: absolute; width: 300px; height: 300px; border: 2px solid black; transform-style: preserve-3d; } .cube .front{ transform: rotateY(0deg) translateZ(150px); } .cube .back{ transform: rotateY(180deg) translateZ(150px); } .cube .right{ transform: rotateY(90deg) translateZ(150px); } .cube .left{ transform: rotateY(-90deg) translateZ(150px); } .cube .top{ transform: rotateX(90deg) translateZ(150px); } .cube .bottom{ transform: rotateX(-90deg) translateZ(150px); } @keyframes rotate{ 0%{transform: rotateY(0);} 100%{transform: rotateY(360deg);} }
以上代碼創建了一個300像素寬和300像素高的方塊,然后為其添加了6個面(front、back、right、left、top、bottom),每個面使用transform屬性對其進行3D變換。通過使用transform-style: preserve-3d,保留了3D變換效果。
最后,在動畫中,使用rotateY屬性以每秒10次的速度旋轉方塊360度。
這是一個非常簡單的立方體,但是您可以使用CSS3人體立方技術創建非常引人注目的形狀和視覺效果,提高用戶體驗和互動性。