Javascript

 OPGAVER TIL HTML & CSS – JS – OPGAVE 5

Opgave 5

Opgave 5 – Del 1

Først skal vi igennem disse trin
  • Lav en ny pen i codepen.io
  • Først skal vi have sat rammen for vores cube
  • Start i HTML’en med at skrive dette ind:
< div class=”scene” >
  < div class=”cube” >
    < div class=”cube_face front” >front< /div >
    < div class=”cube_face back” >back< /div >
    < div class=”cube_face right” >right< /div >
    < div class=”cube_face left” >left< /div >
    < div class=”cube_face top” >top< /div >
    < div class=”cube_face bottom” >bottom< /div >
  < /div>
< /div>
 

Opgave 5 – Del 2

Nu skal vi lave CSS’en for klassen scene.

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 80px;
  perspective: 400px;
}    

Opgave 5 – Del 3

Så er vi klar til at definere cuben.

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
}    

Opgave 5 – Del 4

Nu skal vi definere siderne på cuben.

.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 5 – Del 5

I denne del skal vi farve siderne på cuben med deres klasser, og sørge for at placere dem 3 dimensionelt.

.front  { 
  background: hsla(  0, 100%, 50%, 0.7); 
  transform: rotateY(  0deg) translateZ(100px); 
}
.right  { 
  background: hsla( 60, 100%, 50%, 0.7); 
  transform: rotateY( 90deg) translateZ(100px); 
}
.back   { 
  background: hsla(120, 100%, 50%, 0.7); 
  transform: rotateY(180deg) 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 5 – Del 6

Disse klasser vi skal lave nu, bliver refereret til i JS koden, ved at kalde på starten af klassen(show-) 🙂
.cube.show-front  { 
  transform: translateZ(-100px) rotateY(0deg); 
}
.cube.show-right  { 
  transform: translateZ(-100px) rotateY(-90deg); 
}
.cube.show-back   { 
  transform: translateZ(-100px) rotateY(-180deg); 
}
.cube.show-left   { 
  transform: translateZ(-100px) rotateY(90deg); 
}
.cube.show-top    { 
  transform: translateZ(-100px) rotateX(-90deg); 
}
.cube.show-bottom { 
  transform: translateZ(-100px) rotateX(90deg); 
}

Opgave 5 – Del 7

Det er blevet tid til at gå op i HTML’en igen og sætte knapperne ind.
< p class=”radio-group” >
  < label class=”radio1″ >
    < input type=”radio” name=”rotate-cube-side” value=”front” checked / > front
  < /label >
  < label class=”radio1″ >
    < input type=”radio” name=”rotate-cube-side” value=”right” / > right
  < /label >
  < label class=”radio1″ >
    < input type=”radio” name=”rotate-cube-side” value=”back” / > back
  < /label >
  < label class=”radio1″ >
    < input type=”radio” name=”rotate-cube-side” value=”left” / > left
  < /label >
  < label class=”radio1″ >
    < input type=”radio” name=”rotate-cube-side” value=”top” / > top
  < /label >
  < label class=”radio1″ >
    < input type=”radio” name=”rotate-cube-side” value=”bottom” / > bottom
  < /label >
< /p >
 

Opgave 5 – Del 8

Nu mangler vi kun at skabe lidt luft mellem knapperne i CSS’en inden vi går videre til JavaScriptet😉
.radio1 { 
  margin-right: 10px; 
  font-family: sans-serif; 
} 

Opgave 5 – Del 9

Så blev det tid til at lave koden i JavaScriptet😉
   
     

Her under ses koden eksekveret.

   
 
front
back
right
left
top
bottom