2D Transform

2d transform

Ale Davila

example code:

#oil, #moon, #rabbit {
    transition: 0.5s;
}

#oil:hover {
    transform: rotate(45deg);
}

transform scale

example code:

#oil, #moon, #rabbit {
    transition: 0.5s;
}

#oil:hover {
    transform: rotate(45deg);
}

translate

example code:


/* CSS: */
#oil, #moon, #rabbit {
    transition: 0.5s;
}

.moveright {
    transform: translateX(700px);
}
/* JS: */
//create selector
let rabbit = document.querySelector("#rabbit");

rabbit.addEventListener('click', function (event) {
    this.classList.toggle('moveright');
})