Javascript CSS转换到特定位置

我找到了一个例子，credit-gived-to:我正在尝试修改它，以便CSS元素在单击到给定坐标时转换，然后重复

我遇到的问题是，我的代码正在将元素转换为不同于所需的坐标

我怎样才能做到这一点

多谢各位

JavaScript

var $box = $('.box'),
    $btn = $('.toggle');


$box.on('click', function() {
    var $this = $(this);
    if ($this.hasClass('right')) {
        $this.removeClass('right').addClass('down');
    } 
    else if ($this.hasClass('down')) {
        $this.removeClass('down').addClass('left');
    }
    else if ($this.hasClass('left')) {
        $this.removeClass('left').addClass('up');
    }
    else if ($this.hasClass('up')) {
        $this.removeClass('up').addClass('right');
    }

    else {
        $this.addClass('right');
    }
});

CSS

HTML

---

您需要累积翻译，而不是每次都定义一个新的翻译，因为您只需重新考虑初始状态，并且您的移动不会有任何连续性：

var$box=$（'.box'），
$btn=$（'.toggle'）；
$box.on（'click'，function（）{
var$this=$（this）；
if（$this.hasClass（'right'））{
$this.removeClass（'right'）.addClass（'down'）；
}else if（$this.hasClass（'down'））{
$this.removeClass（'down'）.addClass（'left'）；
}else if（$this.hasClass（'left'））{
$this.removeClass（'left'）.addClass（'up'）；
}else if（$this.hasClass（'up'））{
$this.removeClass（'up'）.addClass（'right'）；
}否则{
$this.addClass（'right'）；
}
});
.box{
宽度：50px；
高度：50px；
背景颜色：蓝色；
转变：转变1s；
}
.对{
转换：translateX（100px）translateY（0）；
}
.下来{
转换：translateX（100px）translateY（100px）；
}
.左{
变换：translateX（0）translateY（100px）；
}
.起来{
变换：translateX（0）translateY（0）；
}

Java之于Javascript，犹如痛苦之于绘画，火腿之于仓鼠。他们完全不同。强烈建议有抱负的程序员尝试学习他们试图编写代码的语言的名称。当你发布一个问题时，请适当地标记它。你应该编辑这个问题，以明确你的代码做错了什么。
.box {
    width: 50px;
    height: 50px;
    background-color: blue;
    transition: transform 1s;
}


.right {
    -webkit-transform-origin: 100% 50%;
    transform: translateX(100px);

}
.down {
    -webkit-transform-origin: 100% 50%;
    transform: translatey(100px);

}
.left {
    -webkit-transform-origin: 100% 50%;
    transform: translatex(100px);

}
.up {
    -webkit-transform-origin: 100% 50%;
    transform: translatey(0px);

}

 <div class="box"></div>