work——toolofna

效果

图片翻转

图片标亮

滚动面板

图片翻转

分析

将图片先沿着Y轴旋转60度，然后加载页面后用JavaScript改变角度，实现翻转效果

思路

1、图片作为div的背景图片即可

<div id="work">
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
</div>

2、div旋转60度，设置transition实现动画过渡

transform: rotateY(60deg);
transition: transform 1s;

3、JavaScript改变角度

 $("#work div").css({
  "transform":"rotateY(0)"});

图片标亮

分析

为div设置伪类：hover，设置opacity为.5，当鼠标移动到div上时，opacity变为1，背景图片位置向上移动

思路

1、div设置伪类：hover

#work div:hover{
    opacity: 1;
    background-position: 0 -15px;
}

2、设置opacity和transition

    opacity: 0.4;
    transition: opacity .5s,background-position .5s;

滚动面板

分析

布局

（1）面板多个box并排排列

（2）下边有个滚动条，拉动滚动条会滑动

（3）拉动滚动条，顶部内容向左滑动

（4）滚动鼠标滚轮，同样实现滑动效果

联动

滚动条在底部滚动区域滑动的距离和总距离的比例和上边内容部分滑动的距离和总距离比例是完全相等的

内容滑动距离/内容可以滑动的总距离 = 滚动块滑动的距离/滚动条可以滑动的总距离

思路

1、多个div并排，下面有个滚动条

<div id="work">
    <div class="thumb mouse"></div>
    <div class="thumb