3dimageview

模仿element-ui首页图片3d展示插件 demo地址:http://[e-mail]:zz632893783/3dImageView.git 插件使用方法: $ npm install 3dimageview --save-dev 然后在需要的地方 const imageViewFunc = require('3dimageview'); 函数参数 imageViewFunc({ // 页面元素的id id: 'app', // 透视深度 deep: 600, // 变换速度(单位为毫秒) speed: 250, // 翻转幅度 rotateRange: 20, // 移动幅度 moveRange: 0.03, // 所插入的元素数组 children: [{ // 内容，也可以是'

123

的字符串' 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