Html
    Css
    Js

    
                        
 * {
	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)
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css3绘制3D模型

preserve-3d、animation的应用

0