HTML & CSS

 OPGAVE TIL HTML & CSS – ADVANCED – JUL 3

Opgave 3

Opgave 3 – Del 1

Først skal vi igennem disse trin for at skabe vores lotus blade
  • Lav en ny pen i codepen.io
  • Lav 1 div boks i din HTML del og giv den klassen “position1”
  • Således her

    < div id=”gave3D” > < /div >

Stil dig mellem de to div tags og tryk enter, således.

  • Således her

    < div id=”gave3D” >
        
    < /div >

Lav nu 1 div barn med id’en gave3Dbox, mellem linjerne så det ser således ud:
< div class="gave3D" >
  < div id="gave3Dbox" >< /div >
< /div >

Opgave 3 – Del 3

Nu skal vi lave siderne på pakken i HTML’en

Gå hen og stil dig mellem div taggene på gave3Dbox og tryk enter, så div boksen bliver delt og det ser således ud:
< div class="gave3D" >
  < div id="gave3Dbox" >
  
  < /div >
< /div >

Opgave 3 – Del 4

Nu skal vi så sætte div kasser ind for de 6 sider på pakken.

Nu skal du sætte < div id=”side1 >< /div > ind på den tomme linje:
< div class="gave3D" >
  < div id="gave3Dbox" >
    < div id="side1" >< /div >
  < /div >
< /div >

Opgave 3 – Del 5

I denne del sætter vi de resterende div bokse ind for henholdsvis – side2, side3, side4, side5 og side6

Kopier din div linje med < div id=”side1″ > < /div > og sæt den ind 5 gang under og ret så tallet så det passer med et tal til hver side. Sådan her:

< div class="gave3D" >
  < div id="gave3Dbox" >
    < div id="side1" >< /div >
    < div id="side2" >< /div >
    < div id="side3" >< /div >
    < div id="side4" >< /div >
    < div id="side5" >< /div >
    < div id="side6" >< /div >
  < /div >
< /div >
 

Opgave 3 – Del 6

Så blev det tid til at gå ned i CSS’en

Start med at give din side en baggrundsfarve under body:

body {
  background-color: lightblue;
}
 

Opgave 3 – Del 7

Vi bliver i CSS’en

Fortæl nu hvor henne på side at pakken skal placeres. HUSK at vi arbejder med id’er i denne opgaver så brug # i stedet for punktum foran:

#gave3D {
  width: 250px;
  height: 213px;
  margin: 20px auto;
  margin-top: 150px;
}
 

Opgave 3 – Del 8

Vi bliver i CSS’en

Nu skal vi sætte boksen op i 3d, ved at bruge preserve og rotere med X, Y og Z akserne:

#gave3Dbox {
  width: 200px;
  height: 200px;
  top: 50px;
  
  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  
  transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
  -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
  -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
  
  margin: auto;
  position: relative;
  
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
Læg mærke til at der hvor der er 3 linjer om transform, at de er ens! Bortset fra det der står foran som er tilføjet. 
Der er nemlig tilføjet -moz- på den ene kopierede linje og -webkit- foran på den anden kopierede linje. Dette er så man kan se dette i flere browsere.

Opgave 3 – Del 9

Vi bliver i CSS’en. Hvor vi skal fortælle hvordan de 6 sider inde i #gave3Dbox ser ud.

HUSK vi har ikke rykket på siderne endnu, så alle siderne vil ligge oven på hinanden og du vil derfor kun se det som en flade:

#gave3Dbox > div {
  position: absolute;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  width: 200px;
  height: 200px;
  float: left;
  overflow: hidden;
  opacity: 0.85;
  background-color: magenta;
  border: 2px pink inset;
}

Opgave 3 – Del 10

Vi bliver i CSS’en

Nu skal vi så bygge siderne. Vi starter med #side1:

#side1 {
  background-color: magenta;
  border: 2px pink inset;
  transform: rotateX(90deg) translateX(0px) translateY(0px) translateZ(100px);
  -moz-transform: rotateX(90deg) translateX(0px) translateY(0px) translateZ(100px);
  -webkit-transform: rotateX(90deg) translateX(0px) translateY(0px) translateZ(100px);
}
 

Opgave 3 – Del 11

Vi bliver i CSS’en

Denne og de næste opgaver bliver at sætte de andre sider op:

#side2 {
  background-color: magenta;
  border: 2px pink inset;
  transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(100px);
  -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(100px);
  -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(100px);
}

Opgave 3 – Del 12

Vi bliver i CSS’en

Så sætter vi #side3 op:

#side3 {
  background-color: magenta;
  border: 2px pink inset;
  transform: translateX(0px) translateY(0px) translateZ(100px);
  -moz-transform: translateX(0px) translateY(0px) translateZ(100px);
  -webkit-transform: translateX(0px) translateY(0px) translateZ(100px);
}

Opgave 3 – Del 13

Vi bliver i CSS’en

….og #side4 op:

#side4 {
  background-color: magenta;
  border: 2px pink inset;
  transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(100px);
  -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(100px);
  -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(100px);
}

Opgave 3 – Del 14

Vi bliver i CSS’en

….og #side5 op:

#side5 {
  background-color: magenta;
  border: 2px pink inset;
  transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(100px);
  -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(100px);
  -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(100px);
}

Opgave 3 – Del 15

Vi bliver i CSS’en

….og #side6 op:

#side6 {
  background-color: magenta;
  border: 2px pink inset;
  transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(100px);
  -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(100px);
  -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(100px);
}

Opgave 3 – Del 16

I denne del sætter vi de båndet på pakken. Der skal derfor sættes div bokse ind for henholdsvis – #bond1 og #bond2

Kopier din div linjen med < div class=”bond1″ > < /div > og sæt den ind som barn på alle siderne og ret så tallet så det passer med et tal til hver side. Sådan her:

< div class="gave3D" >
  < div id="gave3Dbox" >
    < div id="side1" >
      < div class="bond1" >< /div >
      < div class="bond2" >< /div >
    < /div >
    < div id="side2" >
      < div class="bond2" >< /div >
    < /div >
    < div id="side3" >
      < div class="bond2" >< /div >
    < /div >
    < div id="side4" >
      < div class="bond2" >< /div >
    < /div >
    < div id="side5" >
      < div class="bond2" >< /div >
    < /div >
    < div id="side6" >
      < div class="bond1" >< /div >
      < div class="bond2" >< /div >
    < /div >
  < /div >
< /div >
 Vi bruger nu en klasse så vi kan genbruge den på flere af siderne.

Opgave 3 – Del 17

Vi skal nu tilbage til CSS’en

Her skal vi først lave .bond1. HUSK at det er en klasse vi laver nu og derfor bliver der sat punktum foran:

.bond1 {
  position: absolute;
  height: 30px;
  width: 200px;
  background-color: purple;
  margin-top: 85px;
}

Opgave 3 – Del 18

Vi bliver i CSS’en

Her skal vi nu lave .bond2:

.bond2 {
  position: absolute;
  height: 200px;
  width: 30px;
  background-color: purple;
  margin-left: 85px;
}

Opgave 3 – Del 19

Vi bliver i CSS’en

Nu skal vi nemlig animere pakken, så den roterer rundt. Igen skal vi bruge 2 animationer for at flere browsere vil se dette:

#gave3Dbox {
  animation: cubeRotation 5s infinite;
  -webkit-animation: cubeRotation 5s infinite; /* Safari 4.0 - 8.0 */
}

Opgave 3 – Del 20

Vi bliver i CSS’en

Endelig skal animationen skabes:

@keyframes cubeRotation {
  0%   {  transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);   }
  50%   { transform: rotateX(-22deg) rotateY(-238deg) rotateZ(0deg);  }
  100%   {    transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);  }
}
@-webkit-keyframes cubeRotation {
  0%   {  -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);   }
  50%   { -webkit-transform: rotateX(-22deg) rotateY(-238deg) rotateZ(0deg);  }
  100%   {    -webkit-transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);  }
}
   
     

Her under vises/eksekveres koden. Hold musen over for at se animationen