HTML & CSS

 OPGAVE TIL HTML & CSS – ADVANCED – ANIMATION – MIDDEL 9

Opgave 9

front
back
right
left
top
bottom

Opgave 9 – Del 1

  • Åben en ny PEN i CODEPEN.IO
  • Start med at lave den yderste div boks med klassen scene1
< div class=”scene1″ >< /div >
 
Nu skal du tilføje klassen for body og scene1 i din CSS.
body {
  margin: 0;
}
.scene1 {
  position: relative;
  transform-style: preserve-3d;
  animation: rotateScene 15s infinite linear;
}
Vi laver animations keyframes senere der får kassen til at dreje rundt.

Opgave 9 – Del 2

Vi går op i HTML’en igen. Nu skal vi lave den div boks(barn) i scene1, som hedder scene2, så det ser således ud:

 < div class=”scene1” >
   < div class=”scene2″ >< /div >
< /div >

  • Gå ned i dit CSS og lav din klasse til scene2.
.scene2 {
  position: absolute;
  left: -1.5em;
  bottom: 1.5em;
  transform: translateY(50%);
  transform-style: preserve-3d;
}

Opgave 9 – Del 3

Vi går op i HTML’en igen. Nu skal vi lave div boksen for cube/kassen, som skal rumme siderne:

< div class=”scene1” >
   < div class=”scene2″ >
      < div class=”cube” >< /div >
   < /div>
< /div >
  • Gå ned i dit CSS og lav keyframen cube.
.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateY(90deg);
  transition: transform 1s;
}
 

Opgave 4 – Del 4

Vi går igen op i HTML’en. For nu skal vi lave div boksene(børnene til cube) for alle 6 sider. Alle siderne har en klasse der hedder “cube_face” og en ekstra klasse der identificerer sidens position. Skriv det, så det ser således ud:

< div class=”scene1″ >
   < div class=”scene2″ >
      < div class=”cube” >
         < div class=”cube_face front” >FRONT< /div >
         < div class=”cube_face back” >BACK< /div >
         < div class=”cube_face right” >RIRGHT< /div >
         < div class=”cube_face left” >LEFT< /div >
         < div class=”cube_face top” >TOP< /div >
         < div class=”cube_face bottom” >BOTTOM< /div >
      < /div>
   < /div>
< /div >
  • Gå ned i dit CSS og lav klassen for cube_face
.cube_face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  line-height: 200px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}
 

Opgave 9 – Del 5

Vi bliver i CSS’en og laver nu klasserene for alle siderne:

 
  • Gå ned i din CSS og lav klasserne for front, back, right, left, top, bottom.
.front  { 
  background: hsla(0, 100%, 50%, 0.7); 
  transform: rotateY(0deg) translateZ(100px); 
}
.back   { 
  background: hsla(120, 100%, 50%, 0.7); 
  transform: rotateY(180deg) translateZ(100px);
}
.right  { 
  background: hsla(60, 100%, 50%, 0.7); 
  transform: rotateY(90deg) translateZ(100px); 
}
.left   { 
  background: hsla(180, 100%, 50%, 0.7); 
  transform: rotateY(-90deg) translateZ(100px);
}
.top    { 
  background: hsla(240, 100%, 50%, 0.7); 
  transform: rotateX( 90deg) translateZ(100px); 
}
.bottom { 
  background: hsla(300, 100%, 50%, 0.7); 
  transform: rotateX(-90deg) translateZ(100px);
}
 

Opgave 9 – Del 6

Vi bliver i CSS’en. Her skal vi lave et keyframen til animationen på boksen. Gå op EFTER klassen .scene1 og tryk enter. Skriv bagefter keyframen ind:

  • Gå ned i dit CSS og lav keyframen for @keyframes rotateScene.
@keyframes rotateScene {
  to {transform: rotateY(360deg)}
}
 
   
     

Her under vises/eksekveres koden

   
 
front
back
right
left
top
bottom