HTML & CSS

 OPGAVE TIL HTML & CSS – ADVANCED – ANIMATION – ADVANCED 1

Opgave 1

Opgave 1 – Del 1

  • Åben en ny PEN i CODEPEN.IO
  • Start med at lave den yderste div boks med klassen body
< div class=”body” >< /div >
 
Nu skal du tilføje klassen for body og scene1 i din CSS.
body {
  margin: 0;
}
.body {
  background-color: #000;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px; /*synsvinkel*/
  perspective-origin: 50% 2em;
  font-size: 75px;
  overflow: hidden;
}

Opgave 1 – Del 2

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

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

  • Gå ned i dit CSS og lav din klasse til scene1. Vi laver keyframen senere.
.scene1 {
  position: relative;
  transform-style: preserve-3d;
  animation: rotateScene 15s infinite linear;
}

Opgave 1 – Del 3

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

 < div class=”body” >
   < div class=”scene1″ >
      < div class=”floor1″ >< /div >
   < /div >
< /div >

  • Gå ned i dit CSS og lav din klasse til floor1.
.floor1 {
  position: absolute;
  top: 1em;
  transform: translate(-50%, -50%) rotateX(90deg);
  height: 15em;
  width: 15em;
  background-image: repeating-conic-gradient(from 45deg, #111 0deg 90deg, #222 90deg 180deg);
  background-size: 1em 1em;
}

Opgave 1 – Del 4

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

 < div class=”body” >
   < div class=”scene1″ >
      < div class=”floor1″ >< /div >
      < div class=”scene2″ >< /div >
   < /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 1 – Del 5

Vi går op i HTML’en igen. Nu skal vi lave div boksen for cube/kassen, som skal rumme siderne. Den skal have klassen “cube” og ligge som barn i “scene2”, så det nu ser således ud:

< div class=”body” >
    < div class=”scene1″ >
        < div class=”floor1″ >< /div >
      < div class=”scene2″ >
          < div class=”cube” >< /div >
      < /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 1 – Del 6

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=”body” >
   < div class=”scene1″ >
      < div class=”floor1″ >< /div >

      < 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>
< /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 1 – Del 7

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 1 – Del 8

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