html5图片自动翻转,纯js实现360度旋转预览图片特效

这是一款纯js实现360度旋转预览图片特效。该js特效仅使用120行代码，即可实现通过滑块、或鼠标手动360度旋转图片，以及自动360度旋转图片的效果。

使用方法

HTML结构

import Rolldate from 'rolldate'

new Rolldate({

el:'#date'

})

commonJS

lt;div class="tabs"gt;

lt;input type="radio" name="tabs" id="sol1" checked="checked"/gt;

lt;label for="sol1"gt;Rangelt;/labelgt;

lt;div class="tab"gt;

lt;div class="frame" id="frame1"gt;lt;/divgt;

lt;input type="range" id="slider" min="0" max="34" step="1" value="0"/gt;

lt;/divgt;

lt;input type="radio" name="tabs" id="sol2"/gt;

lt;label for="sol2"gt;Drag / Swipelt;/labelgt;

lt;div class="tab"gt;

lt;div class="frame" id="frame2"gt;lt;/divgt;

lt;/divgt;

lt;input type="radio" name="tabs" id="sol3"/gt;

lt;label for="sol3"gt;Canvaslt;/labelgt;

lt;div class="tab"gt;

lt;canvas class="frame" id="frame3"gt;lt;/canvasgt;

lt;/divgt;

lt;/divgt;

lt;div id="overlay"gt;Loading...lt;/divgt;

CSS样式

body {

margin: 0;