Show sourcecode

The following files exists in this folder. Click to view.

public_html/gamla-kurser/webbutv1/projekt/

Cards/
MemoRing/
backup/
card.html
css/
index_old.html
index_tabs.html
js/
projekt-framtidens-infrastruktur/
retro/
venturo/

`card.html`

33 lines ASCII Windows (CRLF)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


<!DOCTYPE html>

<html lang="sv">



<head>

  <meta charset="utf-8">

  <title>Card</title>

  <link rel="stylesheet" href="./css/card.css">

  <script>

    const card = document.querySelector('.card');

    card.addEventListener('mousemove', function (e) {

      let xAxis = (window.innerWidth / 2 - e.pageX) / 25;

      let yAxis = (window.innerHeight / 2 - e.pageY) / 25;

      card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;

    });

  </script>

</head>



<div class="container">

  <div class="card">

    <div class="front">Front</div>

    <div class="back">Back</div>

  </div>

  <div class="cube">

    <div class="face front"></div>

    <div class="face back"></div>

    <div class="face right"></div>

    <div class="face left"></div>

    <div class="face top"></div>

    <div class="face bottom"></div>

  </div>

</div>



</html>