CSS3立方體效果是一種令人驚嘆的3D效果,可以用來制作宣傳頁面、演示模型等等。通過簡單的CSS代碼,我們可以讓一個2D元素變成一個具有深度和逼真感的3D立方體。
/* 容器定義 */ .container { margin: 0 auto; width: 240px; height: 240px; position: relative; perspective: 1000px; } /* 正面 */ .front { position: absolute; width: 240px; height: 240px; transform-origin: 50% 50% -120px; transform: translateZ(120px); background-color: #f00; } /* 后面 */ .back { position: absolute; width: 240px; height: 240px; transform-origin: 50% 50% 120px; transform: rotateY(180deg) translateZ(120px); background-color: #0f0; } /* 左面 */ .left { position: absolute; width: 240px; height: 240px; transform-origin: 0 50% 0; transform: rotateY(-90deg) translateZ(120px); background-color: #00f; } /* 右面 */ .right { position: absolute; width: 240px; height: 240px; transform-origin: 100% 50% 0; transform: rotateY(90deg) translateZ(120px); background-color: #ff0; } /* 頂面 */ .top { position: absolute; width: 240px; height: 240px; transform-origin: 50% 0 0; transform: rotateX(90deg) translateZ(120px); background-color: #f0f; } /* 底面 */ .bottom { position: absolute; width: 240px; height: 240px; transform-origin: 50% 100% 0; transform: rotateX(-90deg) translateZ(120px); background-color: #0ff; }
通過以上代碼,我們可以定義一個有容器,分別添加正面、后面、左面、右面、頂面和底面的6個面,使其具有3D的立體感。我們只需要通過簡單的更改容器和面的寬、高、背景色、位置和角度等屬性,就可以制作出具有不同風格和立體感覺的立方體效果了。