3dimageview

模仿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

Usage no npm install needed!

<script type="module">
  import dimageview from 'https://cdn.skypack.dev/3dimageview';
</script>

README

模仿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