更新下：好久没用博客园了，今天为了点赞别人的文章又登录了，谢谢chrome帮我记住了账号密码，下面这个效果之前自己已经实现了，分享个演示地址：https://codepen.io/nooby/pen/vKogZB
有一次上数据结构课老师布置了一个用队列的思想通过js和Html来做一个“跳舞配对”的网页，当时那个跳舞的部分用了css3里面transform的相关属性做了个个让图片无限翻转的效果，可能正是由于这个效果，让我想到了–可以不可以通过transform来弄个3D的立方体呢？后来慢慢的去做，遇到好多问题，下面把这次小尝试记录下，等到日后有灵感再去弄。。。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#main{
width: 500px;
height: 500px;
margin:150px auto;
position: absolute;
transform-style: preserve-3d;
left:40%;
perspective: 1500px;
}
img{
width:240px;
height:150px;
position: absolute;
}
img:nth-child(1){
transform:rotateY(30deg) translateZ(120px);
-webkit-transform: rotateY(30deg) translateZ(120px);
-moz-transform: rotateY(30deg) translateZ(120px);
}
img:nth-child(2){
transform:rotateY(120deg) translateZ(120px);
-webkit-transform: rotateY(120deg) translateZ(120px);
-moz-transform: rotateY(120deg) translateZ(120px);
}
img:nth-child(3){
transform:rotateY(210deg) translateZ(120px);
-webkit-transform: rotateY(210deg) translateZ(120px);
-moz-transform: rotateY(210deg) translateZ(120px);
}
img:nth-child(4){
transform:rotateY(300deg) translateZ(120px);
-webkit-transform: rotateY(300deg) translateZ(120px);
-moz-transform: rotateY(300deg) translateZ(120px);
}
</style>
<script>
// var r=120 / Math.tan(45/ 180 * Math.PI);//计算translate的值
/*window.onload=function f(){
var oImg=document.getElementsByTagName("img");
for(var i=0;i<oImg.length;i++){
oImg[i].style.transform=rotateY(0,30+i*90+'deg');
}
}*/
</script>
</head>
<body>
<div id="main">
<img src="Images/a.jpg">
<img src="Images/f.jpg">
<img src="Images/c.jpg">
<img src="Images/d.jpg">
</div>
</body>
</html>
问题1、在chrome浏览器里面和ie浏览器里面的效果不同
问题2、不知道怎么加上两个“盖子”
问题3、想通过js来控制rotateY()以实现转动变换的效果，发现用普通获取属性的方法获取不了rotateY（）（见注释处）
。。。
希望知道上面的问题怎么解决的博友们不吝赐教哈，谢谢！
