CSS3是一種基于樣式表的語(yǔ)言，用于描述如何在網(wǎng)頁(yè)上展示HTML或XML文檔。利用CSS3的transform屬性，我們可以創(chuàng)建很多酷炫的效果。這篇文章講解如何使用CSS3將立方體旋轉(zhuǎn)成梯形。

/* CSS代碼開(kāi)始 */
.container {
width: 200px;
height: 200px;
position: relative;
margin: 50px auto;
perspective: 800px;
}
.cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.cube-face {
position: absolute;
width: 200px;
height: 200px;
}
.front {
background: #3498db;
transform: rotateY(0deg) translateZ(100px);
}
.right {
background: #e67e22;
transform: rotateY(90deg) translateZ(100px);
}
.back {
background: #9b59b6;
transform: rotateY(180deg) translateZ(100px);
}
.left {
background: #2ecc71;
transform: rotateY(-90deg) translateZ(100px);
}
.top {
background: #f1c40f;
transform: rotateX(-90deg) translateY(-100px) translateZ(100px);
}
.bottom {
background: #e74c3c;
transform: rotateX(90deg) translateY(100px) translateZ(100px);
}
.trapezoid {
position: absolute;
width: 200px;
height: 0;
border-style: solid;
border-width: 80px 0 120px 0;
border-color: transparent transparent #e67e22 transparent;
transform-origin: bottom center;
transform: translateZ(100px) rotateX(270deg);
}
.container:hover .cube {
transform: rotateY(180deg);
}
/* CSS代碼結(jié)束 */

首先在 HTML 中創(chuàng)建一個(gè)有透視感的容器 container，并在其中創(chuàng)建一個(gè)立方體 cube，該立方體包含六個(gè)面，分別是前、右、后、左、上、下，并且每個(gè)面都是一個(gè)旋轉(zhuǎn)的矩形。通過(guò)設(shè)置每個(gè)面的 transform 屬性來(lái)實(shí)現(xiàn)立方體的 3D 效果。

接著，在立方體上面創(chuàng)建一個(gè)梯形 trapezoid，該梯形的位置和大小需要調(diào)整，以便與立方體相交處的斜面匹配。使用 transform 屬性將梯形旋轉(zhuǎn)至水平面，并設(shè)置 transform-origin 屬性，以便從底部居中旋轉(zhuǎn)。

最后，在 hover 時(shí)改變立方體的 transform 屬性，使其旋轉(zhuǎn) 180 度，從而實(shí)現(xiàn)旋轉(zhuǎn)成梯形的效果。