css3-perspective/index.html at main · aloescript/css3-perspective · GitHub

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head>
  <title>CSS3 Perspective Playground</title>
  <link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
  <div id="app">
    <h2>CSS3 Perspective Playground</h2>
    <main>
      <section class="settings">
        <div class="settings-container">
          <label>perspective: {{perspective}}px;</label>
          <input type="range" min="0" max="999" v-model="perspective"/>

          <label>rotateX: {{rotateX}}deg; </label>
          <input type="range" min="-180" max="180" v-model="rotateX"/>

          <label>rotateY: {{rotateY}}deg; </label>
          <input type="range" min="-180" max="180" v-model="rotateY"/>

          <label>rotateZ: {{rotateZ}}deg; </label>
          <input type="range" min="-180" max="180" v-model="rotateZ"/>

          <button type="button" @click="reset">Reset</button>
          <button type="button" @click="copy">Copy</button>
        </div>
      </section>
      <section class="output">
        <div class="box-container">
          <div class="box" :style="styleObject"></div>
        </div>
      </section>
    </main>
  </div>

  <css-doodle>
    :doodle {
      @grid: 1x3 / 100vmax;
      position: absolute;
      top: 0; left: 0;
      z-index: 0;
    }

    @size: 100% 150%;
    position: absolute;

    background: @m(
      100,
      linear-gradient(
        transparent,
        @p(#FFFDE1, #FB3569)
      )
      @r(0%, 100%) @r(0%, 100%) /
      @r(1px) @r(23vmin)
      no-repeat
    );

    will-change: transform;
    animation: f 50s linear calc(-50s / @I() * @i()) infinite;

    @keyframes f {
      from { transform: translateY(-100%) }
      to { transform: translateY(100%) }
    }
  </css-doodle>

  <script src="https://unpkg.com/css-doodle@0.38.3/css-doodle.min.js"></script>
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <script src="app.js"></script>

  <div id="custom-alert" style="display: none; position: fixed; top: 20px; right: 20px; background: #4CAF50; color: white; padding: 15px; border-radius: 5px;">
  </div>

</body>
</html>