CSS3是一種用于創建網頁布局和設計的語言。通過CSS3,開發者可以實現很多炫酷的效果,包括通過變換技術實現3D立體效果。
/* 正方體樣式 */ .cube{ width:100px; height:100px; transform-style: preserve-3d; } /* 正方體的6面 */ .cube .front, .cube .back, .cube .top, .cube .bottom, .cube .left, .cube .right{ width:100px; height:100px; position:absolute; backface-visibility: hidden; } /* 正方體的前面 */ .cube .front{ transform: translateZ(50px); background: #ff3b3b;} /* 正方體的背面 */ .cube .back{ transform: translateZ(-50px) rotateY(180deg); background: #8bc34a; } /* 正方體的頂部 */ .cube .top{ transform: rotateX(90deg) translateZ(50px); background: #2196f3; } /* 正方體的底部 */ .cube .bottom{ transform: rotateX(-90deg) translateZ(50px); background: #ffc107; } /* 正方體的左面 */ .cube .left{ transform: rotateY(-90deg) translateX(-50px); background: #795548; } /* 正方體的右面 */ .cube .right{ transform: rotateY(90deg) translateX(50px); background: #e91e63; }
以上代碼實現了一個正方體的樣式,通過設置transform-style: preserve-3d屬性實現3D效果。分別對正方體的6個面進行了絕對定位,并使用transform屬性對每個面進行變換,從而實現了正方體的3D效果。