3dimageview 中文文档教程

Question

模仿element-ui首页图片3d展示插件
　　demo地址: https://github.com/zz632893783/3dImageView
插件使用方法:
　　$ npm install 3dimageview --save-dev
然后在需要的地方
　　const imageViewFunc = require('3dimageview');
函数参数
　　imageViewFunc({
　　　　// 页面元素的id
　　　　id: 'app',
　　　　// 透视深度
　　　　deep: 600,
　　　　// 变换速度(单位为毫秒)
　　　　speed: 250,
　　　　// 翻转幅度
　　　　rotateRange: 20,
　　　　// 移动幅度
　　　　moveRange: 0.03,
　　　　// 所插入的元素数组
　　　　children: [{
　　　　　　// 内容，也可以是div等标签的字符串
　　　　　　content: '1',
　　　　　　// 容器的样式
　　　　　　style: {
　　　　　　　　// 容器的宽度
　　　　　　　　width: '120px',
　　　　　　　　// 容器的高度
　　　　　　　　height: '70px',
　　　　　　　　// 背景色
　　　　　　　　backgroundColor: '#409eff',
　　　　　　　　// 距离外层容器左侧宽度
　　　　　　　　left: '30px',
　　　　　　　　// 距离外层容器右侧宽度
　　　　　　　　right: '15px',
　　　　　　　　// 容器的上下层级
　　　　　　　　zIndex: 5
　　　　　　}
　　　　}, {
　　　　　　content: '2',
　　　　　　style: {
　　　　　　　　width: '50px',
　　　　　　　　height: '45px',
　　　　　　　　backgroundColor: '#67c23a',
　　　　　　　　left: '300px',
　　　　　　　　top: '15px',
　　　　　　　　zIndex: 4,
　　　　　　　　boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.2)',
　　　　　　　　overflow: 'hidden',
　　　　　　　　borderRadius: '4px',
　　　　　　　　fontSize: '20px',
　　　　　　　　textAlign: 'center',
　　　　　　　　lineHeight: '45px',
　　　　　　　　color: 'white'
　　　　　　}
　　　　}, {
　　　　　　content: '3',
　　　　　　style: {
　　　　　　　　width: '400px',
　　　　　　　　height: '300px',
　　　　　　　　backgroundColor: '#E6A23C',
　　　　　　　　left: '100px',
　　　　　　　　top: '50px',
　　　　　　　　zIndex: 0,
　　　　　　　　boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.2)',
　　　　　　　　overflow: 'hidden',
　　　　　　　　borderRadius: '4px',
　　　　　　　　fontSize: '50px',
　　　　　　　　textAlign: 'center',
　　　　　　　　lineHeight: '300px',
　　　　　　　　color: 'white'
　　　　　　}
　　　　}]
　　})
若想预览demo，clone项目之后，
　　$ cnpm install
安装所有模块之后
　　$ webpack-dev-server
浏览器中输入
　　http://localhost:8080