transform-origin-visualizer/index.html at main · yanguadotdev/transform-origin-visualizer · 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transform-origin Visualizer</title>
    <link rel="icon" href="/logo.svg">
    <meta name="description"
        content="Transform-Origin Visualizer es una herramienta interactiva para visualizar cómo el origen de transformación en CSS afecta el comportamiento de una caja. Ajusta dinámicamente la posición y dimensiones de la caja y observa los cambios.">
    <meta name="keywords" content="CSS, transform-origin, visualizador, herramienta interactiva, desarrollo web">

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="Transform-Origin Visualizer - Herramienta Interactiva CSS">
    <meta property="og:description"
        content="Transform-Origin Visualizer es una herramienta interactiva para visualizar cómo el origen de transformación en CSS afecta el comportamiento de una caja. Ajusta dinámicamente la posición y dimensiones de la caja y observa los cambios.">
    <meta property="og:image" content="/image.webp">
    <meta property="og:type" content="website">


    <link rel="stylesheet" href="/fonts.css">
    <link rel="stylesheet" href="/style.css">

    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/atom-one-dark.min.css">
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>

    <script type="module" src="main.js" defer></script>

</head>

<body>

    <header class="header">
        <h1 class="main-title">TRANSFORM-ORIGIN-VISUALIZER</h1>
    </header>

    <section class="playground">
        <section class="playground__config">
            <div class="options-box">
                <h2 class="title">Configuración</h2>
                <div class="group-field">
                    <span class="subtitle">transform-origin</span>
                    <div class="field-values">
                        <div class="field">
                            <label for="x">X: </label>
                            <input placeholder="0" value="50" type="number" name="x" id="x">
                            <select name="x-unit" id="x-unit">
                                <option value="px">px</option>
                                <option value="%" selected>%</option>
                            </select>
                        </div>

                        <div class="field__divider"></div>

                        <div class="field">
                            <label for="y">Y: </label>
                            <input placeholder="0" value="50" type="number" name="y" id="y">
                            <select name="y-unit" id="y-unit">
                                <option value="px">px</option>
                                <option value="%" selected>%</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="group-field">
                    <span class="subtitle">width | height</span>
                    <div class="field-values">
                        <div class="field">
                            <label for="width">width: </label>
                            <input value="250" max="999" type="number" name="width" id="width">
                            <span>px</span>
                        </div>

                        <div class="field__divider"></div>

                        <div class="field">
                            <label for="y">height: </label>
                            <input value="250" type="number" name="height" id="height">
                            <span>px</span>
                        </div>
                    </div>
                </div>

            </div>

            <!-- OUTPUT -->
            <div class="output">
                <h3 class="subtitle">Output</h3>
                <pre><code id="css-code" class="language-css">
.box {
    width: 250px;
    height: 250px;
    transform-origin: 50% 50%;
}</code></pre>
            </div>

            <footer class="info-own">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="24" height="24" rx="12" fill="#F5E53D"></rect>
                    <path
                        d="M12 9.12952C10.6667 5.9999 6 6.33323 6 10.3333C6 14.3333 12 17.6667 12 17.6667C12 17.6667 18 14.3333 18 10.3333C18 6.33323 13.3333 5.9999 12 9.12952Z"
                        stroke="#101318" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <p>Proyecto alojado en <a class="link" href="https://github.com/yanguadotdev/transform-origin-visualizer"
                        rel="noreferrer noopener" target="_blank">Github</a>, creado por <a
                        href="https://github.com/yanguadotdev" rel="noreferrer noopener" class="link"
                        target="_blank">Samir</a></p>
            </footer>
        </section>

        <section class="playground__viewver">
            <div class="shape"></div>
            <div class="origin">
                <div class="point"></div>
            </div>
        </section>
    </section>

</body>

</html>