css怎么实现3d心形 |div css产品列表

.heart {
transform-style: preserve-3d;
transform: rotateY(45deg) rotateZ(45deg);
}
.heart:before,
.heart:after {
content: "";
position: absolute;
background-color: red;
transform: translateZ(-1px) rotateZ(45deg);
}
.heart:before {
width: 50%;
height: 100%;
border-radius: 50% 0 0 50%;
top: 0;
left: 0;
transform-origin: right center;
}
.heart:after {
width: 50%;
height: 100%;
border-radius: 0 50% 50% 0;
top: 0;
right: 0;
transform-origin: left center;
}
.heart:hover:before,
.heart:hover:after {
background-color: pink;
}

首先设置heart类的transform-style属性为preserve-3d，表示保留3D特性。接下来使用rotateY和rotateZ方法让heart类绕x轴和z轴旋转，这样看起来就像一个立体的心形。

然后定义before和after伪元素，并设置宽度、高度和背景色。使用translateZ方法将它们沿z轴移动，设置rotateZ方法让它们旋转45度，使得它们的角度与heart类的角度相同。同时，定义border-radius属性，让一侧变成圆弧，呈现心形的形状。

最后，使用transform-origin方法定义变换的起点，让伪元素移动到心形的正确位置。当鼠标悬停在heart类上时，变换心形的颜色，看起来更加生动有趣。