CSS3是一種逐漸流行的Web技術標準，它拓展了CSS2.1的功能，使得我們可以創建許多令人驚嘆的特效。CSS3魔方特效是其中一種經典的特效，下面我們就來了解一下CSS3魔方特效視頻。

/*魔方主容器*/
.container {
width: 300px;
height: 300px;
margin: 0 auto;
perspective: 800px; /*三維效果*/
}
/*魔方每一面*/
.cube {
position: relative;
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d; /*啟用3D*/
}
/*魔方每一面的內部內容*/
.cube .side {
position: absolute;
width: 300px;
height: 300px;
border: 2px solid #000;
background-color: rgba(0,0,0,0.5);
text-align: center;
font-size: 48px;
font-weight: bold;
color: #FFF;
line-height: 300px;
}
/*魔方第一面（正面）*/
.cube .front {
transform: translateZ(150px);
}
/*魔方第二面（反面）*/
.cube .back {
transform: rotateX(180deg) translateZ(150px);
}
/*魔方第三面（右側面）*/
.cube .right {
transform: rotateY(90deg) translateZ(150px);
}
/*魔方第四面（左側面）*/
.cube .left {
transform: rotateY(-90deg) translateZ(150px);
}
/*魔方第五面（頂部）*/
.cube .top {
transform: rotateX(90deg) translateZ(150px);
}
/*魔方第六面（底部）*/
.cube .bottom {
transform: rotateX(-90deg) translateZ(150px);
}
/*鼠標懸停時的效果*/
.cube:hover {
transform: rotateY(90deg) rotateX(-90deg);
}

我們可以使用以上CSS代碼來創建一個魔方容器及魔方每一面，其中perspective屬性的值用于指定觀看者距離物體的距離，這是實現三維效果的關鍵。我們還可以使用transform-style屬性來啟用3D效果，使得我們的魔方更加逼真。此外，當鼠標懸停在魔方上時，我們可以使用:hover選擇器來實現旋轉效果。

通過以上代碼，我們就可以創建一個簡單的魔方特效。如果你想要更加炫酷的效果，可以使用一些其他的屬性，例如perspective-origin（魔方旋轉的中心點）、backface-visibility（用于隱藏背面）等等。當然，為了讓我們的代碼更加簡潔易懂，我們也可以使用SCSS或LESS等CSS預處理器進行開發。