【米色】淘宝店鼠标经过图片旋转180度效果分析,附源码下载

【上图就是鼠标经过图片180度旋转的效果图，这个效果挺不错的 很多店铺以及很多地方都会用得到它】

【一些说明】：授人以鱼不如授人以渔，本来想直接分享代码的。担心很多同志没有代码基础的话，就不知道怎么回事。所以米色详细的剖析一下 这个鼠标经过旋转180度 到底是怎么回事。最后米色也将整理出来的  特效源码模板 分享出来了。懒人模板，你要做的只是作图 替换图片。不用考虑尺寸的问题了。下面是教程开始。

第一：我们先来看看 实现这个效果的CSS代码（这里为了方便查看对代码做了精简）

.arrow-d {

transform: rotate(180deg);      /*这里是实现图片旋转*/

transform-origin: 50% 30%;    /*这是淘宝CLASS默认附带的原点移动样式*/

}

上面这个就是淘宝官方的CLASS，第一个属性是  CSS3变形 ； 第二个属性是 原点移动。配合上图 我们会发现。一般情况下  我们不对元素进行原点移动，那默认是以元素中心点进行移动的，就是图中的红点。

第三：上图是米色用代码写的一个模拟旋转轨迹的DOM，是以中心点进行旋转的

第四：这里米色给DOM添加了 原点移动   transform-origin:50% 30%;   我们会发现  元素的原点从中心点  移动到了  上面 也就是白点位置。对原点移动以后的元素 旋转轨迹如上图所示。

会发现，从初始位置到最后的位置，其实整个过程 元素 只是上移了大概40px的距离。（背景图每一小格高度为10px，图片尺寸100*100）

也就是说，添加了原点移动的话，图片旋转时候的中心点位置就会发生偏移。这也是为什么米色分享的这个效果，其中比较麻烦的地方，需要计算偏移的距离。

第五：这个图是给大家演示看看，原点移动能实现什么效果。（效果说明，鼠标经过图片往右缩放 二不是从中心点缩放）

[图上网址已失效，请勿访问]

通过上面的动图，就非常直观的看出来，淘宝店里面给图片添加了这个效果后，图片是如何变化的。

所以问题就来了，上面很直观看到，图片旋转了180度后，图片的位置发生了变化，如果这么直接放店铺里面，那到时候买家看不到完整的图片，影响用户体验。

那怎么才能解决这个问题呢？这里米色分别编写了2个版本的源码模板，供大家测试使用。源码里面已经写了很详细的文字说明。

【简单版】：不需要计算代码里面的宽高数值，只需要在PS里面制作一张专用尺寸的图片即可。

【升级版】：不需要专门设计图片了，只需要修改代码里面一个参数即可（推荐）

很多人还是觉得，专门去设计一个尺寸的图片太麻烦，如果无视尺寸，什么图片都能实现效果，那就完美了。所以米色推荐使用升级版。

【优势】：

1- 你不需要去计算繁琐的数值。用这个米色模板，你只需要   替换图片地址 链接  和 图片尺寸数值 即可。

2- 就算你不懂这个原点的运动原理，按照米色提供的尺寸计算公式  你就能随意在店铺实现这种特效了。

3-源码中，也考虑到了，如果有需要一排放多个图片的情况，也做了相关的说明。

4- 有很多同志还是会说，还是太麻烦了，可不可以傻瓜式操作，我只需要复制粘贴 修改简单参数就可以直接生成特效代码呢？ 所以米色专门将这个特效编写开发成了一个在线生成工具，你要做的事情就是复制粘贴图片地址和修改宽高尺寸。并且还提供了特效运动方式和时间的控制，可以做成各种各样的炫酷效果。源码里面提供了在线生成工具的使用地址。

【源码下载】：已经上传到文章附件，直接下载即可