* {
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的应用