CSS正方形看起來立體是在設計中常常使用的技巧。想要實現這個效果，我們需要了解一些CSS基礎知識。

.square {
width: 200px;
height: 200px;
background-color: #f0f0f0;
position: relative;
transform-style: preserve-3d;
}
.square:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.4);
transform: rotateX(15deg) translateZ(50px);
transform-origin: center center -50px;
filter: blur(10px);
}
.square:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
transform: rotateY(15deg) translateZ(50px);
transform-origin: center center -50px;
}

以上代碼是實現一個看起來立體的正方形的核心代碼。通過使用偽類: before 和: after，在正方形上添加兩個透明的三角形，使用旋轉和平移來使它們看起來像是正方形的一些陰影和反光。

同時，我們需要使用transform-style: preserve-3d來告訴瀏覽器我們的元素是在3D空間中的，而且我們也要設置transform-origin來讓元素圍繞它的中心旋轉。使用filter: blur(10px)來給第一個偽類加上模糊效果，這樣就會更真實。

總之，通過這種簡單的CSS技巧，我們可以為我們的設計增添立體感，使得頁面看起來更加生動具有層次感。