* { margin:0; padding:0 } html,body { width:100%; height:100%; background:black; display:flex; overflow:hidden; } #heart3d { width:200px; height:260px; -border:1px solid yellow; margin:auto; position:relative; transform-style:preserve-3d; /*变换类型:保持3D*/ animation:play 10s linear infinite; /*无限线性交替动画*/ } #heart3d div { position:absolute; width:200px; height:260px; border:solid red; border-width:1px 1px 0 0; -border-radius:40% 50%; /*X轴 50左上角 50%右上角和左下角 0右下角 / Y轴 40% 左上角 50%右上角和左下角 0右下角*/ border-radius:50% 50% 0 / 40% 50% 0; } @keyframes play { from { transform:rotateY(0deg) rotateX(0deg) } to { transform:rotateY(360deg) rotateX(360deg) } }
preserve-3d、animation的应用