css3制作3D效果 LoveHeart(小小的表白神器)---包含思路

这是用css3做出来的一个小小的特效，最主要运用的是css3中transfrom的用法。
思路：1：首先外部有一个heard的大盒子，用来包裹里面的照片盒子cube，将其设置transform-style：preserve-3d;(设置3d环境),并且使其旋转，以便看到cube的3d效果。
2：cube盒子也设置为3d环境
3：cube里面的img分别用一个div包裹，分别做cube的6个面，
分别对其设置transform属性，将其位置调到cube的6个面上。
4：创建包裹cube的心型。它是由36个大小与heard盒子相同的盒子构成，其中每一个盒子都去掉border-left，border-bottom，设置border-radius: 50% 50% 0/ 40% 50% 0;使其形状变成半个爱心形状。由于心型由36个盒子通过旋转构成的，采用js循环创建每一个盒子，并为其设置 line.style.transform = " rotateY("+ i * 10 +"deg) rotateZ(4时5deg) translateX(150px) ，让每一个盒子随着i的增加，绕Y轴旋转的角度也随之增加10deg
5:为heard设置animation(动画)使其达到3D旋转效果。关键帧如下：
@keyframes rotate {
0% {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
100%{
transform: rotateY(720deg) rotateX(360deg) rotate(360deg);
}
}