3D变换
var option1 = {
selector: '#axial3d-github',
imgs: [
{ src: 'https://bestvist.github.io/axial3d/public/github/bg.png', left: '0', top: '0' },
{ src: 'https://bestvist.github.io/axial3d/public/github/house1.png', left: '480px', top: '70px', zIndex: 1 },
{ src: 'https://bestvist.github.io/axial3d/public/github/house2.png', left: '790px',top: '120px', zIndex: 1 },
{ src: 'https://bestvist.github.io/axial3d/public/github/ship-shadow.png', left: '440px', top: '250px', zIndex: 2 },
{ src: 'https://bestvist.github.io/axial3d/public/github/ship.png', left: '430px', top: '140px', zIndex: 2 },
{ src: 'https://bestvist.github.io/axial3d/public/github/cat-shadow.png', left: '360px', top: '290px', zIndex: 3 },
{ src: 'https://bestvist.github.io/axial3d/public/github/cat.png', left: '350px', top: '90px', zIndex: 3 },
]
}
var effect1 = new Axial3d(option1);
旋转变换
var option2 = {
selector: '#axial3d-demo1',
transform: 'rotate',
imgs: [
{ src: 'https://bestvist.github.io/axial3d/public/demo1/bg.png', left: '50px', top: '10px' },
{ src: 'https://bestvist.github.io/axial3d/public/demo1/2.png', left: '150px', top: '10px', static: true },
{ src: 'https://bestvist.github.io/axial3d/public/demo1/3.png', left: '50px', top: '300px', static: true },
{ src: 'https://bestvist.github.io/axial3d/public/demo1/4.png', left: '300px', top: '300px', static: true }
]
}
var effect2 = new Axial3d(option2);
不同幅度
var option3 = {
selector: '#axial3d-demo2',
swing: 20,
imgs: [
{ src: 'https://bestvist.github.io/axial3d/public/demo2/bg.png', left: '50px', top: '10px', static: true },
{ src: 'https://bestvist.github.io/axial3d/public/demo2/1.png', left: '100px', top: '200px' },
{ src: 'https://bestvist.github.io/axial3d/public/demo2/2.png', left: '650px', top: '200px' },
{ src: 'https://bestvist.github.io/axial3d/public/demo2/3.png', left: '300px', top: '10px' }
]
}
var effect3 = new Axial3d(option3);