三维行星定向旋转木马滑块

3D planets directional carousel slider

h5, slider, widget

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2813
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(".planet").click(function() {
    $('.container').attr("planet-center", this.id);
    if (this.id == "planet1") centerPlanet1();
    if (this.id == "planet2") centerPlanet2();
    if (this.id == "planet3") centerPlanet3();

});

function centerPlanet1() {
    var tl = new TimelineMax().
    to('#planet1', 1, {
        xPercent: 0,
        z: 0
    }, 0).
    to('#planet2', 1, {
        xPercent: 140,
        z: -800
    }, 0).
    to('#planet3', 1, {
        xPercent: -140,
        z: -800
    }, 0);

}

function centerPlanet2() {
    var tl = new TimelineMax().
    to('#planet1', 1, {
        xPercent: -140,
        z: -800
    }, 0).
    to('#planet2', 1, {
        xPercent: 0,
        z: 0
    }, 0).
    to('#planet3', 1, {
        xPercent: 140,
        z: -800
    }, 0);
}

function centerPlanet3() {
    var tl = new TimelineMax().
    to('#planet1', 1, {
        xPercent: 140,
        z: -800
    }, 0).
    to('#planet2', 1, {
        xPercent: -140,
        z: -800
    }, 0).
    to('#planet3', 1, {
        xPercent: 0,
        z: 0
    }, 0);
}

$(function() {
    centerPlanet2();
});

编译

CSS

HTML

3D planets directional carousel slider

h5, slider, widget

编辑器支持Emmet

快捷键

3D planets directional carousel slider

h5, slider, widget

HTML5三维旋转木马动画相册

使用HTML和CSS实现三维电视机旋转控制操作

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：