html如何实现3d动画,[HTML5] HTML5 3D爱心动画及其制作过程

.heart3d{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100px;height:160px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-animation:spin 15s infinite linear;animation:spin 15s infinite linear;

}.heart3d [class^="rib"]{position:absolute;width:100px;height:160px;border:solid #f22613;border-width:1px 1px 0 0;border-radius:50% 50% 0 / 40% 50% 0;

}.heart3d [class$="1"]{-webkit-transform:rotateY(10deg) rotateZ(45deg) translateX(30px);transform:rotateY(10deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="2"]{-webkit-transform:rotateY(20deg) rotateZ(45deg) translateX(30px);transform:rotateY(20deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="3"]{-webkit-transform:rotateY(30deg) rotateZ(45deg) translateX(30px);transform:rotateY(30deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="4"]{-webkit-transform:rotateY(40deg) rotateZ(45deg) translateX(30px);transform:rotateY(40deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="5"]{-webkit-transform:rotateY(50deg) rotateZ(45deg) translateX(30px);transform:rotateY(50deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="6"]{-webkit-transform:rotateY(60deg) rotateZ(45deg) translateX(30px);transform:rotateY(60deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="7"]{-webkit-transform:rotateY(70deg) rotateZ(45deg) translateX(30px);transform:rotateY(70deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="8"]{-webkit-transform:rotateY(80deg) rotateZ(45deg) translateX(30px);transform:rotateY(80deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="9"]{-webkit-transform:rotateY(90deg) rotateZ(45deg) translateX(30px);transform:rotateY(90deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="10"]{-webkit-transform:rotateY(100deg) rotateZ(45deg) translateX(30px);transform:rotateY(100deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="11"]{-webkit-transform:rotateY(110deg) rotateZ(45deg) translateX(30px);transform:rotateY(110deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="12"]{-webkit-transform:rotateY(120deg) rotateZ(45deg) translateX(30px);transform:rotateY(120deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="13"]{-webkit-transform:rotateY(130deg) rotateZ(45deg) translateX(30px);transform:rotateY(130deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="14"]{-webkit-transform:rotateY(140deg) rotateZ(45deg) translateX(30px);transform:rotateY(140deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="15"]{-webkit-transform:rotateY(150deg) rotateZ(45deg) translateX(30px);transform:rotateY(150deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="16"]{-webkit-transform:rotateY(160deg) rotateZ(45deg) translateX(30px);transform:rotateY(160deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="17"]{-webkit-transform:rotateY(170deg) rotateZ(45deg) translateX(30px);transform:rotateY(170deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="18"]{-webkit-transform:rotateY(180deg) rotateZ(45deg) translateX(30px);transform:rotateY(180deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="19"]{-webkit-transform:rotateY(190deg) rotateZ(45deg) translateX(30px);transform:rotateY(190deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="20"]{-webkit-transform:rotateY(200deg) rotateZ(45deg) translateX(30px);transform:rotateY(200deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="21"]{-webkit-transform:rotateY(210deg) rotateZ(45deg) translateX(30px);transform:rotateY(210deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="22"]{-webkit-transform:rotateY(220deg) rotateZ(45deg) translateX(30px);transform:rotateY(220deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="23"]{-webkit-transform:rotateY(230deg) rotateZ(45deg) translateX(30px);transform:rotateY(230deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="24"]{-webkit-transform:rotateY(240deg) rotateZ(45deg) translateX(30px);transform:rotateY(240deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="25"]{-webkit-transform:rotateY(250deg) rotateZ(45deg) translateX(30px);transform:rotateY(250deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="26"]{-webkit-transform:rotateY(260deg) rotateZ(45deg) translateX(30px);transform:rotateY(260deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="27"]{-webkit-transform:rotateY(270deg) rotateZ(45deg) translateX(30px);transform:rotateY(270deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="28"]{-webkit-transform:rotateY(280deg) rotateZ(45deg) translateX(30px);transform:rotateY(280deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="29"]{-webkit-transform:rotateY(290deg) rotateZ(45deg) translateX(30px);transform:rotateY(290deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="30"]{-webkit-transform:rotateY(300deg) rotateZ(45deg) translateX(30px);transform:rotateY(300deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="31"]{-webkit-transform:rotateY(310deg) rotateZ(45deg) translateX(30px);transform:rotateY(310deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="32"]{-webkit-transform:rotateY(320deg) rotateZ(45deg) translateX(30px);transform:rotateY(320deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="33"]{-webkit-transform:rotateY(330deg) rotateZ(45deg) translateX(30px);transform:rotateY(330deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="34"]{-webkit-transform:rotateY(340deg) rotateZ(45deg) translateX(30px);transform:rotateY(340deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="35"]{-webkit-transform:rotateY(350deg) rotateZ(45deg) translateX(30px);transform:rotateY(350deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="36"]{-webkit-transform:rotateY(360deg) rotateZ(45deg) translateX(30px);transform:rotateY(360deg) rotateZ(45deg) translateX(30px);

}