<div id="translateX">X ekseninde 50px kaydır</div>
<div id="translateY">Y ekseninde 50px kaydır</div>
<div id="translate">X ekseninde 50px, Y ekseninde -50px kaydır</div>
div {
    width:120px;
    height:50px;
    background-color:cornflowerblue;
    color:#fff;
    text-align: center;
    margin:20px;
    padding:10px;
    transition:transform 1s;
}

#translateX:hover{
    transform:translateX(50px);
}

#translateY:hover{
    transform:translateY(50px);
}

#translate:hover{
    transform:translate(50px, -50px);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.