最近在學習css的過程中，嘗試著給登錄界面增加了3D效果，讓整個頁面看起來更加生動有趣。下面分享一下具體實現方式。

.login-wrapper {
position: relative;
perspective: 1200px;
}
.login-card {
position: absolute;
width: 400px;
height: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
transform-style: preserve-3d;
transition: all 0.5s ease;
}
.login-card:hover {
transform: translate(-50%, -50%) rotateX(15deg) rotateY(-15deg);
}
.login-input {
width: 90%;
height: 50px;
margin: 20px 20px;
border: none;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
padding: 10px;
font-size: 16px;
}
.login-button {
width: 100%;
height: 50px;
margin: 20px 0;
background-color: #1abc9c;
border: none;
border-radius: 5px;
color: #fff;
font-size: 18px;
}
.login-button:hover {
background-color: #16a085;
}

首先，在登錄界面所在的容器中設置perspective屬性，為了讓元素在三維空間中具有深度感，同時給登錄卡片元素設置position屬性為absolute以及transform-style屬性為preserve-3d，使其在父容器中具備3D屬性。

然后，給登錄卡片元素設置hover效果，讓其在鼠標移入時以平面組成的X軸和Y軸旋轉，增加動態效果。

最后，設置登錄界面的輸入框和按鈕的樣式，實現樣式調整和對輸入數據的交互處理。

通過以上代碼，我們可以快速地實現一個充滿3D效果的登錄界面，提升用戶體驗和頁面設計質量。