HTML 3D正方形相片是一種非常酷的效果，它可以讓你的相片在網頁中展現立體感。下面是一段HTML和CSS代碼，可以讓你實現這個效果。

.wrapper {
position: relative;
width: 200px;
height: 200px;
perspective: 800px;
}
.square {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s;
}
.square:hover {
transform: rotateX(180deg) rotateY(90deg) rotateZ(90deg);
}
.front,
.back,
.left,
.right,
.top,
.bottom {
position: absolute;
width: 200px;
height: 200px;
background: url("square.jpg");
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.left {
transform: translateX(-100px) rotateY(-90deg);
}
.right {
transform: translateX(100px) rotateY(90deg);
}
.top {
transform: translateY(-100px) rotateX(90deg);
}
.bottom {
transform: translateY(100px) rotateX(-90deg);
}

在這段代碼中，我們定義了一個 .wrapper 來包含我們的正方形相片。我們還需要為 .square 定義 3D 的效果，并控制它的旋轉。我們在 .square:hover 中實現了懸浮機制，用 mouseover 改變坐標軸實現旋轉。

最后，我們定義了六個不同的面。通過 translateX、translateY 和 translateZ 屬性將這些面點放置到不同的位置，并使用 rotateX、rotateY 和 rotateZ 屬性來旋轉他們。

通過這些CSS樣式和HTML元素，我們可以輕松地實現3D正方形相片的效果。