CSS3是一種強大的技術(shù)，可以用來創(chuàng)造有趣的效果，比如怎樣讓一個矩形看起來像一個立體的立方體。下面是一個簡單的例子：

.cube {
position: relative;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(45deg);
width: 100px;
height: 100px;
background-color: #8BC34A;
transition: transform 0.5s ease;
}
.cube:hover {
transform: rotateX(60deg) rotateY(60deg);
}
.cube:before,
.cube:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #FFC107;
}
.cube:before {
transform: translateZ(-50px);
}
.cube:after {
transform: rotateY(90deg) translateZ(-50px);
}

在上面的代碼中，我們創(chuàng)建了一個class為“cube”的CSS屬性。我們使用“transform-style: preserve-3d”定義它為三維容器，這樣它就有了立體效果。我們使用“transform: rotateX(45deg) rotateY(45deg)”將其旋轉(zhuǎn)45度，這樣可以讓它更有立體感。設(shè)置了寬度和高度，并設(shè)置了背景顏色。我們還定義了一個過渡效果。當(dāng)鼠標(biāo)懸停在立方體上時，它會旋轉(zhuǎn)60度。

接著，我們使用“:before”和“:after”偽元素來創(chuàng)建立方體的不同面。我們設(shè)置它們的“content”為空、絕對定位、寬度和高度百分之百。我們將“:before”定位到了立方體的背面，并設(shè)置了“translateZ(-50px)”來將其移動到遠離我們的距離，從而呈現(xiàn)出立體效果。我們將“:after”定位到了立方體的左側(cè)邊緣，并使用“rotateY(90deg)”將其旋轉(zhuǎn)90度。我們還將其移動到遠離我們的位置，呈現(xiàn)出立體效果。

使用上述代碼，你可以創(chuàng)建一個簡單的立方體，并使用鼠標(biāo)懸停來旋轉(zhuǎn)它。當(dāng)然，這只是一個很簡單的例子，你可以使用更復(fù)雜的技術(shù)，比如多個立方體組成的3D場景。憑借CSS3的強大能力，你可以創(chuàng)造出無數(shù)有趣的效果。