效果展示：http://fanwalker.com/ChristmasGift/index.html
源码地址：https://github.com/FanWalker/ChristmasGift
效果展示：demo
html结构
舞台 stage
-容器 container
---图片 img
---图片 img
css布局
舞台：加个视距，perspective: 800px;
容器：
设置3D视图说明：transform-style: preserve-3d;
加上绝对定位：position: absolute;
设置过度属性：transition: transform 1s; 让图片能够平滑的进行3D转换
图片：
设置绝对定位：position: absolute;使图片公用同一个中心点
图片正好绕成一个圈，因此，图片rotateY值正好0~360等分，于是，如果有9张图片，则每个图片的旋转角度累加40(360 / 9 = 40)度即可
img:nth-child(1) { transform: rotateY( 0deg ); }
img:nth-child(2) { transform: rotateY( 40deg ); }
img:nth-child(3) { transform: rotateY( 80deg ); }
img:nth-child(4) { transform: rotateY( 120deg ); }
img:nth-child(5) { transform: rotateY( 160deg ); }
img:nth-child(6) { transform: rotateY( 200deg ); }
img:nth-child(7) { transform: rotateY( 240deg ); }
img:nth-child(8) { transform: rotateY( 280deg ); }
img:nth-child(9) { transform: rotateY( 320deg ); }
然后是让图片拉开空间，设置translateZ的值，详细教程：好吧，CSS3 3D transform变换，不过如此！
最后js实现鼠标点击container图片转换：
var container = document.getElementById("container");
var index = 0;
container.addEventListener("click",function(){
this.style.transform = "rotateY(" +-40*++index+"deg)";
})