2015年1月19日

今天的完成的事：

1.完善了task8，加了阴影调整了一下边距更符合设计图

2.把附加任务的js要点看完了（明天再写js的总结）

3.学会了css卡片翻转

4.基本完成了task9 http://119.10.57.66:8010/task9.1.html（间距和一些小细节需要调整）

遇到的问题：

1.js还是感觉没有理解，对象，函数，变量之间转换和赋值的运用有点模糊

2.在写task9卡片翻转的正面时，面对那么多条条框框，脑袋就大了，像第一次写网页一样，把什么ul，float，table都用上了，感觉好繁琐，最后写完task9代码都快上900行了。

3css卡片翻转还是比较好理解，用css3能很简单的实现。

收获：

1.对网页布局了解更深刻（毕竟又刷了一个副本）

2.学会了css实现卡片翻转

3.js更熟悉（只是熟悉.....）

明天的计划：

最近进度有点快，感觉以前的知识有点忘了，留一天时间巩固一下，先不赶进度了

1.继续完善task9

2.撸js，写js认知总结

3.回顾以往task，写一篇任务总结

css3卡片翻转原理：

1.对外容器设置视角属性（perspective）和相对定位，对font和back面绝对定位，设置同一位置（例如：top：0；left：0；）。

2.对back面设置transform:rotateY(-180deg);即back面静态时时翻过来的，font不设置即（0deg）。

3.对font和back面设置backface-visibility: hidden; 这个效果使反面隐藏不可见，所以在静态时因为back是翻过来的所以不可见。

4.用：hover 让back回到正面（0deg），font面翻转（180deo）

最终实现翻转效果 

对css3动画各属性不熟悉可以参考：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/comment-page-3/#comments