Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
body {
	background:#FFFFFF;
	overflow:hidden;
}
.heart {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	width:200px;
	height:260px;
	margin:auto;
	transform-style:preserve-3d;
	perspective:800px;
	animation:rot 15s linear infinite;
}
@keyframes rot {
	from {
	transform:rotateY(0deg) rotateX(0deg)
}
to {
	transform:rotateY(360deg) rotateX(360deg)
}
}.rib {
	position:absolute;
	width:200px;
	height:260px;
	border:solid red;
	border-width:1px 1px 0 0;
	border-radius:100% 100% 0/40% 100% 0;
	transition:all 1s;
}
.cube {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	width:100px;
	height:100px;
	color:red;
	transform-style:preserve-3d;
	transform:translateZ(50px);
}
.cube div {
	position:absolute;
	width:100px;
	height:100px;
}
.cube div:nth-child(1) {
	left:0;
	top:-100px;
	transform-origin:bottom;
	transform:rotateX(90deg);
}
.cube div:nth-child(2) {
	left:0;
	top:100px;
	transform-origin:top;
	transform:rotateX(-90deg);
}
.cube div:nth-child(3) {
	left:-100px;
	top:0px;
	transform-origin:right;
	transform:rotateY(-90deg);
}
.cube div:nth-child(4) {
	left:100px;
	top:0px;
	transform-origin:left;
	transform:rotateY(90deg);
}
.cube div:nth-child(5) {
	left:0;
	top:0px;
}
.cube div:nth-child(6) {
	left:0;
	top:0px;
	transform:translateZ(-100px);
}

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

js+CSS 3D爱心魔方代码

更新时间:2020-11-09 00:58:21

0