Rubiks cube version 3 day 1

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

README.md

@@ -1,46 +0,0 @@
-# CSS to the Rescue @cmda-minor-web 2021 - 2022
-
-Wij vinden het web fascinerend. De laatste jaren is CSS een volwassen en zeer krachtige taal geworden (niet langer een bottleneck - integendeel). Veel van de (nieuwe) **CSS-lekkernijen** worden echter nog niet ten volle benut. Sommige delen van de spec worden onterecht (nog) niet bemind, andere delen zijn zo groot en complex dat we mogelijkheden nog niet hebben doorgrond. Aan jou de mooie opdracht om de onontgonnen delen van de CSS-wereld in kaart te brengen.
-
-**In dit vierweekse vak ga je experimenteren met (voor jou) nieuwe CSS technieken - om daarna/mee een innovatieve, experimentele én aangename ervaring te creëren - met alleen vanilla HTML en vanilla CSS (frameworks, preprocessors, libraries en JavaScript zijn niet toegestaan).**
-
-Goed om te weten: Het experiment wordt gewaardeerd - zelfs/zeker als het niet (helemaal) lukt. Voel je vrij om verder te gaan dan de CSS-technieken die je al beheerst.
-
-## Dingen om vooraf te doen
-- 🔱 **Fork** deze repository.
-- ✅ [**Enroll** je voor de minor via de courselector](https://icthva.sharepoint.com/sites/courseselector#/CourseSelector/web-design-and-development/2021-2022) (dan kun je je werk straks ook op [DLO](https://dlo.mijnhva.nl/d2l/home/324147) opleveren).
-- 📒 **Bekijk** het [programma](https://cmda-minor-web.github.io/css-to-the-rescue-2122/files/CSSttR-2122-Kick-off.pdf) (pdf 48MB) en de [kennismakingsoefening](https://cmda-minor-web.github.io/css-to-the-rescue-2122/docs/oefening.html) alvast even.
-
-## Opdrachten
-Het vak bestaat uit:
-- [Een kennismakingsoefening](https://cmda-minor-web.github.io/css-to-the-rescue-2122/oefening.html)
-- [De eindopdracht](https://cmda-minor-web.github.io/css-to-the-rescue-2122/index.html)
-
-De [beoordelingscriteria voor de eindopdracht](https://cmda-minor-web.github.io/css-to-the-rescue-2122/beoordelingsformulier.html) op een rijte.
-
-## Themasessies
-Schrijf je in het [CSSttR channel](https://teams.microsoft.com/l/channel/19%3a1261f148f4a14a788c98784a96d361c4%40thread.tacv2/03%2520-%2520CSS%2520to%2520the%2520Rescue?groupId=36b2af3f-d616-4e89-b714-f45196f2a6ad&tenantId=0907bb1e-21fc-476f-8843-02d09ceb59a7) bij 'Files' in de 'Indeling en Planning' Excel in voor zowel woensdag als donderdag in voor een themasessie naar je keuze (1 per dag):
-- [Materiaal voor de themasessies](https://cmda-minor-web.github.io/css-to-the-rescue-2122/themas.html)
-
-## Programma
-Het vak beslaat 4 weken. Bekijk de [kick-off presentatie](https://cmda-minor-web.github.io/css-to-the-rescue-2122/files/CSSttR-2122-Kick-off.pdf) (pdf 48MB). 
-
-In Teams vind je het [CSSttR channel](https://teams.microsoft.com/l/channel/19%3a1261f148f4a14a788c98784a96d361c4%40thread.tacv2/03%2520-%2520CSS%2520to%2520the%2520Rescue?groupId=36b2af3f-d616-4e89-b714-f45196f2a6ad&tenantId=0907bb1e-21fc-476f-8843-02d09ceb59a7) bij 'Files' de Excel met de 'Indeling en Planning'. Daar schrijf je je ook in voor themasessies en het eindgesprek.
-
-Colleges, lessen en gesprekken vinden plaats in het TTH (4e verdieping :-).
-
-## Docenten
-- Vasilis van Gemert
-- Sanne 't Hooft
-
-## Leerdoelen
-- Je kunt experimenteren met (voor jou) nieuwe css-technieken - om de mogelijkheden op waarde te schatten en te gebruiken waar gepast.
-- Je hebt begrip van de volle kracht en mogelijkheden van CSS. Je laat zien dat CSS meer kan dan allen web pages 'stylen'.
-- Je hebt begrip van de interactie-technieken van CSS (en HTML). De UX is aangenaam bruikbaar binnen de gekozen context(en).
-- Je hebt begrip hoe progressive enhancement elegant toe te passen. Je laat zien dat je cascade, inheritance en specificity kunt toepassen.
-
-
-## De Selector First CSS & No JS aanpak
-Het **eerste uitgangspunt** is dat je *geen* ID's en classes gebruikt. Niet omdat ze niet nuttig zijn, maar om te oefenen met de [vele CSS selectoren](https://css-tricks.com/almanac/) die je tot je beschikking hebt. ID's mag je alleen gebruiken om de :target selector te triggeren en uiteraard om labels te koppelen aan inputs. En als het echt echt echt niet anders kan, heb je permissie om een enkele class toe te voegen.
-
-Een **tweede uitgangspunt** is dat je *geen* JavaScript gebruikt. Als iets niet kan met CSS, dan zal je iets anders moeten verzinnen om te maken. We onderzoeken de mogelijkheden van CSS in dit vak, en niet die van JS.

buttons.css

@@ -0,0 +1,261 @@
+@keyframes omhoog {
+  0% {
+    transform: none;
+  }
+  100% {
+    transform: rotateX(8turn) rotateY(0turn);
+  }
+}
+@keyframes links {
+  0% {
+    transform: none;
+  }
+  100% {
+    transform: rotateX(0turn) rotateY(-8turn);
+  }
+}
+@keyframes omlaag {
+  0% {
+    transform: none;
+  }
+  100% {
+    transform: rotateX(-8turn) rotateY(0turn);
+  }
+}
+@keyframes rechts {
+  0% {
+    transform: none;
+  }
+  100% {
+    transform: rotateX(0turn) rotateY(8turn);
+  }
+}
+
+section {
+  height: 100vh;
+
+  display: grid;
+  place-items: center;
+
+  transform-style: preserve-3d;
+  /* perspective: 30em; */
+  animation-play-state: paused;
+}
+
+h1 {
+  font-family: "Poppins";
+  font-weight: 1000;
+  font-size: calc(1.5vw + 1.5vh + 1.5vmin);
+}
+
+label {
+  display: flex;
+  width: calc(2vw + 2vmin);
+  height: calc(2vw + 2vmin);
+  font-size: calc(1vw + 1vh + 1vmin);
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+  background-color: rgb(255, 255, 255);
+  font-weight: 400;
+  border: 2.5px solid #000;
+  border-radius: 5px;
+  box-shadow: 2px 2px 1px #00000050;
+  justify-content: center;
+  align-items: center;
+}
+
+label:hover {
+  background-color: #9aafe0;
+  color: white;
+}
+label:active {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: calc(1.8vw + 1.8vmin);
+  height: calc(1.8vw + 1.8vmin);
+  background-color: #4f78d6;
+  color: white;
+}
+
+label:first-of-type {
+  position: absolute;
+  top: calc(3.5vh + 3.5vmin);
+  left: calc(3.5vh + 3.5vmin);
+}
+label:nth-of-type(2) {
+  position: absolute;
+  top: calc(6.5vh + 6.5vmin);
+  left: calc(7vh + 7vmin);
+}
+label:nth-of-type(3) {
+  position: absolute;
+  top: calc(6.5vh + 6.5vmin);
+  left: calc(3.5vh + 3.5vmin);
+}
+label:nth-of-type(4) {
+  position: absolute;
+  top: calc(6.5vh + 6.5vmin);
+}
+
+label:nth-of-type(5) {
+  position: absolute;
+  top: calc(3.5vh + 3.5vmin);
+  background-color: #b71234;
+  color: white;
+}
+
+input[type="radio"] {
+  position: absolute;
+  left: -1000em;
+}
+input[type="checkbox"] {
+  position: absolute;
+  left: -1000em;
+}
+
+#up:checked ~ section {
+  animation-play-state: running;
+  animation: omhoog 100s linear infinite;
+}
+#right:checked ~ section {
+  animation-play-state: running;
+  animation: rechts 100s linear infinite;
+}
+#bottom:checked ~ section {
+  animation-play-state: running;
+  animation: omlaag 100s linear infinite;
+}
+#left:checked ~ section {
+  animation-play-state: running;
+  animation: links 100s linear infinite;
+}
+#pause:checked ~ section {
+  animation-play-state: paused;
+}
+label span:last-of-type {
+  display: none;
+}
+#pause:checked ~ label span:last-of-type {
+  display: inline;
+}
+#pause:checked ~ label span:first-of-type {
+  display: none;
+}
+
+/* Rotation hover */
+
+#right-bottom:hover ~ section ul:nth-child(-n + 9) {
+  --rY: 90deg;
+}
+#left-bottom:hover ~ section ul:nth-child(-n + 9) {
+  --rY: -90deg;
+}
+
+#right-middle:hover ~ section ul:nth-child(-n + 18):not(:nth-child(-n + 9)) {
+  --rY: 90deg;
+}
+#left-middle:hover ~ section ul:nth-child(-n + 18):not(:nth-child(-n + 9)) {
+  --rY: -90deg;
+}
+
+#right-top:hover ~ section ul:nth-child(-n + 27):not(:nth-child(-n + 18)) {
+  --rY: 90deg;
+}
+#left-top:hover ~ section ul:nth-child(-n + 27):not(:nth-child(-n + 18)) {
+  --rY: -90deg;
+}
+
+#up-right:hover ~ section ul:nth-child(3n) {
+  --rX: 90deg;
+}
+#down-right:hover ~ section ul:nth-child(3n) {
+  --rX: -90deg;
+}
+
+#up-left:hover ~ section ul:nth-child(3n + 1) {
+  --rX: 90deg;
+}
+#down-left:hover ~ section ul:nth-child(3n + 1) {
+  --rX: -90deg;
+}
+
+#up-middle:hover ~ section ul:nth-child(3n + 2) {
+  --rX: 90deg;
+}
+#down-middle:hover ~ section ul:nth-child(3n + 2) {
+  --rX: -90deg;
+}
+/* section:hover ul:nth-child(-n + 9):not(:nth-child(-n + 6)) {
+  --rZ: -90deg;
+} */
+
+/* Up */
+label:nth-of-type(6) {
+  position: absolute;
+  top: calc(12vh + 12vmin);
+  left: calc(17.5vw + 17.5vmin);
+}
+label:nth-of-type(7) {
+  position: absolute;
+  top: calc(12vh + 12vmin);
+  left: calc(23.5vw + 23.5vmin);
+}
+label:nth-of-type(8) {
+  position: absolute;
+  top: calc(12vh + 12vmin);
+  left: calc(29.5vw + 29.5vmin);
+}
+
+/* Right */
+label:nth-of-type(9) {
+  position: absolute;
+  top: calc(22vh + 22vmin);
+  right: calc(6.5vw + 6.5vmin);
+}
+label:nth-of-type(10) {
+  position: absolute;
+  top: calc(28vh + 28vmin);
+  right: calc(6.5vw + 6.5vmin);
+}
+label:nth-of-type(11) {
+  position: absolute;
+  top: calc(36vh + 36vmin);
+  right: calc(6.5vw + 6.5vmin);
+}
+
+/* Down */
+label:nth-of-type(12) {
+  position: absolute;
+  bottom: calc(6.5vh + 6.5vmin);
+  left: calc(29.5vw + 29.5vmin);
+}
+label:nth-of-type(13) {
+  position: absolute;
+  bottom: calc(6.5vh + 6.5vmin);
+  left: calc(23.5vw + 23.5vmin);
+}
+label:nth-of-type(14) {
+  position: absolute;
+  bottom: calc(6.5vh + 6.5vmin);
+  left: calc(17.5vw + 17.5vmin);
+}
+
+/* Left */
+label:nth-of-type(15) {
+  position: absolute;
+  top: calc(36vh + 36vmin);
+  left: calc(6.5vw + 6.5vmin);
+}
+label:nth-of-type(16) {
+  position: absolute;
+  top: calc(28vh + 28vmin);
+  left: calc(6.5vw + 6.5vmin);
+}
+label:last-of-type {
+  position: absolute;
+  top: calc(22vh + 22vmin);
+  left: calc(6.5vw + 6.5vmin);
+}