css3 + js 散列画廊

css3 + js 散列画廊

基于慕课网[散列画廊](http://www.imooc.com/learn/366)视频教学与模板，在vue里实现css3 + js 散列画廊，从中确实体验到vue框架带来的简便。经过这个页面的编写与思考，逻辑思维也更加清晰，后续进行了代码规范化和优化，并增加细节样式，提高页面使用体验。

区域模块

海报区

选中的海报水平垂直居中
允许<控制条>控制展现&翻转

左右存放区

分左右分区
存放其他海报
每个海报位置，角度随机

控制条区

控制&展现对应的海报
翻面切换<当前展现>的海报的正反面

---

思路步骤：

1. 设置背景、选中/未选中的图片样式、位置
2. 图片元素内容遍历
3. 设置左右存放未选中图片的区域，x,y
4. 图片选中的样式和事件，未选中的其余图片样式
5. 给一个随机数的翻转角度，随机位置
6. 导航栏nav的样式，事件，以及与图片进行绑定

---

后续优化：

1. 选中的海报 背景放大

因为card_center有top left，选中的card突然被添加了top left值，使得画面跳动
card 里添加top left margin等值

2. 海报被选中到中间展现的过程设置平滑
3. 海报翻转时有向左/右移的动态趋势

---

---

样式笔记：
transition : property duration timing-function delay;
property规定过渡效果的CSS属性名称
duration 规定过渡效果的秒/毫秒
timing-function 速度效果的速度曲线 ，默认ease
delay 定义过渡效果延迟多久开始，默认0

transform: translate(0px,0px) rotateY(0deg); //设置平移，沿y轴旋转
transform-style: preserve-3d; //3d效果

当她不面向元素时，把它隐藏
backface-visibility: hidden;

设置垂直居中的方法：
position：absolute;
top:50%;
margin-top:高度一半；