HTML & CSS
OPGAVE TIL HTML & CSS – ADVANCED – ANIMATION 8
Opgave 8 - Translate, 3D og Transform
Opgave 8 – Del 1
Her skal vi lære at ændre på formater
- Åben en ny PEN i CODEPEN.IO
- Lav en div boks med en div boks inden i
- Tildel den yderste div boks klassen container1.
Således: < div class=”container1″ > - Den inderste div boks skal have klassen < div = “image1” >
- Inde i den div boks skal du lave et image tag < img src = “” >
- Husk den skal have klassen class=”img”
- Således her:
< div class=”container1″ >
< div class=”image1″ >
< img src=” ” class=”img” >
< /div >
< /div >
Nu skal du tilføje et billede imellem ” “.
Du kan kan finde et billede på PIXABAY.COM/DA højre klik på et billede og kopier link adressen – https:// ……….
Opgave 8 – Del 2
Nu skal vi gøre CSS’en klar til at animere det vi har skrevet
- Gå op i dit CSS og lav din klasse til *{ } og en .container1{}
- Den med * skal indeholde: padding: 0; margin: 0;
Nu skal du kode containeren den der indeholder billedet:
Du vælger selv farven på baggrunden 🙂
.container1 { width: 100%; min-height: 100vh; background: #333; }
Opgave 8 – Del 3
Gå op i CSS’en igen og skriv nu dette afsnit ind
Her styrer vi hvordan billedet vises og hvad det skal transformeres med. Det absolutte position er for at få den til at ligge oven på containeren.
Læg mærke til funktionen transform-style: perserve-3d. Den fortæller at vi hvordan elementer er ændret i 3D form. Den skal skal bruges sammen med en transform funktion
.image1 { perspective: 1000px; width: 50%; position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); transform-style: preserve-3d; }
Opgave 8 – Del 4
Gå op i CSS’en igen og tilføj denne klasse:
- Her fortæller vi at boksene skal transformere sig på 4 sekunder.
- Den skal rotere sig om X-aksen og Z-aksen.
- Den skal have skygge på(box-shadow).
.image1 .img { width: 70%; transform: rotateX(70deg) rotateZ(-60deg) translate3d(-120px, 0px, 70px); box-shadow: -80px 60px 15px 5px rgba(0,0,0,0.4); transition: all .4s; transform-style: preserve-3d; }
Opgave 8 – Del 5
Gå op i CSS’en igen og tilføj sidste klasse. Nemlig en :hover{}
Her fortæller vi hvad der skal ske når vi holder musen over billedet. Der skal billedet faktisk bare vises som det er:
.image1:hover .img {
transform: rotateX(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
Her under vises/eksekveres koden
