css3立方体旋转成梯形 |css图片选中css

/* CSS代码开始 */
.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代码结束 */

首先在 HTML 中创建一个有透视感的容器 container，并在其中创建一个立方体 cube，该立方体包含六个面，分别是前、右、后、左、上、下，并且每个面都是一个旋转的矩形。通过设置每个面的 transform 属性来实现立方体的 3D 效果。

接着，在立方体上面创建一个梯形 trapezoid，该梯形的位置和大小需要调整，以便与立方体相交处的斜面匹配。使用 transform 属性将梯形旋转至水平面，并设置 transform-origin 属性，以便从底部居中旋转。

最后，在 hover 时改变立方体的 transform 属性，使其旋转 180 度，从而实现旋转成梯形的效果。