CSS3動畫是有助于Web開發人員創建各種動態元素的最新版本。

其中的立體旋轉屬性是頁面動畫效果中常用的一種，可以使元素在三維空間中旋轉。

下面這段代碼演示了如何通過CSS3動畫來創建一個立方體旋轉效果：

.cube {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto 0;
transform-style: preserve-3d;
animation: rotate 6s linear infinite;
}
.face {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
border: 2px solid #fff;
background: rgba(255, 255, 255, 0.5);
text-align: center;
font-size: 48px;
color: #333;
line-height: 200px;
animation: rotate 6s linear infinite reverse;
}
.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);
}
@keyframes rotate {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}

上述代碼中的.cube是一個容器元素，內部有六個面，分別是.front,.back,.left,.right,.top,.bottom。每個面都有自己的類名，并通過 transform 屬性實現在三維空間中的位置與旋轉。

通過關鍵幀動畫rotate，可以實現這個立方體元素在6秒鐘內不停地沿Y軸旋轉360度。

因為我們在.cube中設置了transform-style: preserve-3d，所以其子元素都將遵循“子節點繼承父節點屬性”的規則，繼承其3D效果屬性。

這就是如何使用CSS3動畫的立體旋轉屬性來創建一個簡單的立方體旋轉效果。