【上图就是鼠标经过图片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里面制作一张专用尺寸的图片即可。

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

很多人还是觉得，专门去设计一个尺寸的图片太

来源【企业推广】自媒体，更多内容/合作请关注「辉声辉语」公众号，送10G营销资料！