360-degrees-product-viewer
在电子商务的设计，主要目标之一是，以填补产品和用户之间的差距。这是高价商品尤为重要。因此，重要性整合互动工具，向用户提供了一种方式，以“虚拟体验”的产品。
今天的资源是可以用来显示产品的虚拟游览一个简单的交互式资源。代码段背后的想法是使用图像精灵和拖动链接到该图像的特定帧。你可以用它来显示技术的小工具的外部（或汽车，像我们的演示！），或在一般情况下，创建花哨的产品动画。
创建结构该html结构由两个主要部分组成：figure.product-观众的精灵形象和产品预览图像，以及div.cd产品查看器手柄为观众手柄。
<div id="crayon-5722b10f82d17060161546-1" class="crayon-line"><span class="crayon-r "><div </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"cd-product-viewer-wrapper"</span> <span class="crayon-e ">data-frame</span><span class="crayon-o">=</span><span class="crayon-s ">"16"</span> <span class="crayon-e ">data-friction</span><span class="crayon-o">=</span><span class="crayon-s ">"0.33"</span><span class="crayon-r ">></span></div>
<div id="crayon-5722b10f82d17060161546-2" class="crayon-line"><span class="crayon-r "><div></span></div>
<div id="crayon-5722b10f82d17060161546-3" class="crayon-line"><span class="crayon-r "><figure </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"product-viewer"</span><span class="crayon-r ">></span></div>
<div id="crayon-5722b10f82d17060161546-4" class="crayon-line"><span class="crayon-r "><img </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s ">"img/product-loading.jpg"</span> <span class="crayon-e ">alt</span><span class="crayon-o">=</span><span class="crayon-s ">"product preview"</span><span class="crayon-r ">></span></div>
<div id="crayon-5722b10f82d17060161546-5" class="crayon-line"><span class="crayon-r "><div </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"product-sprite"</span> <span class="crayon-e ">data-image</span><span class="crayon-o">=</span><span class="crayon-s ">"img/product.png"</span><span class="crayon-r ">></span><span class="crayon-r "></div></span></div>
<div id="crayon-5722b10f82d17060161546-6" class="crayon-line"><span class="crayon-r "></figure></span> <span class="crayon-c"><!– .product-viewer –></span></div>
<div id="crayon-5722b10f82d17060161546-7" class="crayon-line"></div>
<div id="crayon-5722b10f82d17060161546-8" class="crayon-line"><span class="crayon-r "><div </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"cd-product-viewer-handle"</span><span class="crayon-r ">></span></div>
<div id="crayon-5722b10f82d17060161546-9" class="crayon-line"><span class="crayon-r "><span </span><span class="crayon-e ">class</span><span class="crayon-o">=