实践—一个3D旋转相册
一直以来学程序语言的时候，想的都是：啊，自己会的太少了，还是要先看下书才行，才能开始写东西，所以在接触一个新语言的时候，大多都是没有写过hello world的。因为刚刚着手的时候只想着看书而不去写，会的多了点就不屑于写。不过在之前的一次经历中，我去校内一个团队面试，因为简介上填写了希望能够从事安卓开发的方向，虽然课下也在开始看这方面的书籍教材，但是不得不说还是感觉很难，所以准备掌握地多了点之后再进行实践。学长问我写过安卓的简单hello world没，我就只能哑口无言。
有的时候，实践也是一种学习，将学过的知识巩固，以及在这种技术学科里面，实践更是一种能力。
现在把心思放在了前端上，这一段时间不知不觉还是天天看，也没1动过手，恰逢室友做了个后台，写前端的时候问了下我几个问题，我才意识到，还是要多练一练才能更好地掌握，以及更好地解决实际问题。
这个3d旋转相册，也是看到知乎上慕课网账号发的，原址。
原址里面介绍地极为详细，各种属性方法，我照着写了一遍，不过还是遇到了一些问题，3d效果并不是理想的那样，有可能是我擅自修改了一点的原因吧，不过后来自己增增改改，倒是改好了，也感觉动手能力还是得到了提高的。
HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> </title> <link rel="stylesheet" href="1.css" /> </head> <body> <div id="photo"> <img src="1.jpg"/> <img src="2.jpg"/> <img src="3.jpg"/> <img src="4.jpg"/> <img src="5.jpg"/> <img src="6.jpg"/> <div id="textDiv"></div> </div> <div id="bigDiv"></div> <script type="text/javascript" src="1.js"></script> </body> </html>
将css样式表与js文件外联，倒是看了DOM编程艺术的影响。不过html文件也就大体上是这些：装载照片的div层id为photo，还有之后作为底盘的div层bigDiv。
CSS:
//清除浏览器默认margin,padding样式 *{ margin:0px; padding:0px; } //背景设为黑色，嗯……大概会比较酷炫 body{ background-color:#000; } #photo{ width:110px; height:180px; border:1px solid #999; margin:160px auto; transform-style:preserve-3d; perspective:800px;//景深 } #photo img{ position: absolute; width: 110px; height: 180px; box-shadow: 0px 0px 8px #eaeaea;//盒子阴影 box-shadow:1 -1 6px #666; -webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));//投影 cursor:pointer; } #textDiv{ text-align:center; position:absolute; font:normal normal bolder 25pt "Palatino Linotype", "Book Antiqua"; color:#999; z-index:-1; } #bottomDiv{ width:1200px; height:1200px; border-radius:50%; position:absolute; top:102%; left:50%; margin-left:-600px; margin-top:-600px; transform:rotateX(90deg);//绕X轴旋转 background:-webkit-radial-gradient(center center, 600px 600px,rgba(158,158,222,0.5),rgba(0,0,0,0)); }
css样式的设置我大概上就是用得原址里的设置，毕竟达到大致相同的效果，样式还是很固定的，不过在用得时候，查清了里面一些不清楚的样式，还是收获很大的。
JS：
var photoDiv=document.getElementById("photo");//dom得到id为photo的元素 var imgs=photoDiv.getElementsByTagName("img");//dom得到img数组 var length=imgs.length;//得到img的个数 var degs=360/length; photoDiv.style='transform:rotateX(-10deg)'; var x=0;
//设定事件的按时循环执行 setInterval(function(){ for(var s=0;s<length;s++) imgs[s].style="transform:rotateY(" +((x++)*0.2+degs*s)+"deg) translateZ(300px)"; },60);
当时按照原址js的时候，底盘会随着照片转动，而且即使将底盘独立出去，旋转的时候还是有偏移，照片的3d效果也发生了透视错误。大概是我前面有所改动的原因吧，不过修改成了上面的代码之后，一切还是很符合心意的。
