Transform

Animations

Home
Web 2

Animation :: 2D Tranformations

ex 1: rotate

here is the code


                            #bride, #groom, #dog{
                                transition: transform 0.5s;
                            }

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

ex 2: scale

here is the code


                        #bride, #groom, #dog{
                            transition: transform 0.5s;
                        }

                        #groom:hover{
                        transform: scale(2);
                        }

ex 3: translate

here is the code


                        #bride, #groom, #dog{
                            transition: transform 0.5s;
                        }

                        .move-right:hover{
                        transform: translatex(400px);
                        }

                        let dog = document.querySelector("#dog")

                        dog.addEventListener('click', function (event) {
                            console.log(this.id);
                            this.classList.toggle ('move-right');
                        })