轴动效果 Axial3d

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);