HTML & CSS

 OPGAVE TIL HTML & CSS – ADVANCED – ANIMATION 5

Opgave 5 - Transform-origin

Opgave 5 – Del 1

  • Åben en ny PEN i CODEPEN.IO
  • Start med at lave din div boks en div boks inden i. Således her:
< div class=”boks-1″ >
    < div class=”cirklen1″ > < /div >
< /div >
 
Nu skal du tilføje klassen for boks-1 og cirklen1 i din CSS.
.boks-1 {
  height: 100px;
}
.cirklen1 {
    margin-top: 50px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: purple;
    transform-origin: 200% center;
    animation: drej1 2.5s linear infinite;
}
Ved at benytte transform-origin, så beder vi om at den tager 200% fra sin placering og sætter centrum væk fra objektets oprindelige position. Transform-origin % bliver derfor størrelsen på den cirkel som vores figur drejer rundt i.

Opgave 5 – Del 2

Gå ned i CSS’en igen og skriv nu din keyframes ind for at animere cirklen 
Her fortæller vi at cirklen skal dreje rundt.

@keyframes drej1 {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

 

Når vi laver animationen bruger vi transform: rotate. Her fortæller vi at den skal starte på 0 grader(objektets oprindelige position) og dreje hele vejen rundt i en cirkel på 360 grader.

   
     

Her under vises/eksekveres koden