diff --git a/index.html b/index.html index 1da8c3a..05abcb3 100644 --- a/index.html +++ b/index.html @@ -1,74 +1,73 @@ - + - - - - CSS Matrix3D Perspective Calculator - - - -
-
-

CSS Matrix3D Perspective Calculator

-

Задайте 4 точки на поле и размер виджета — получите CSS matrix3d() для перспективного отображения

-
-
- - -
-
- -
-
-
-

Preview — перетаскивайте углы

- + + + + CSS Matrix3D Perspective Calculator + + + +
+
+

CSS Matrix3D Perspective Calculator

+

Задайте 4 точки на поле и размер виджета — получите CSS matrix3d() для перспективного отображения

-
-

Live Preview

-
-
-
- WIDGET + Перетаскивайте углы на поле +
+ + +
+
+ +
+
+
+ +
+
+
+
+
+ WIDGET +
-
-
-
-

Основное поле

-
- - +
+
+

Основное поле

+
+ + +
+
+ +
+

Виджет

+
+ + +
+
+ +
+

Углы четырёхугольника

+
+
+ +
+

CSS Output

+ +
+ + +
+
-
-

Виджет

-
- - -
-
- -
-

Углы четырёхугольника

-
-
- -
-

CSS Output

- -
- - -
-
- - - - - - \ No newline at end of file + + + diff --git a/script.js b/script.js index 55f92eb..2615179 100644 --- a/script.js +++ b/script.js @@ -347,6 +347,9 @@ document.body.className = mode === 'preview' ? 'mode-preview' : 'mode-edit'; $('btnEdit').classList.toggle('active', mode === 'edit'); $('btnPreview').classList.toggle('active', mode === 'preview'); + $('modeHint').textContent = mode === 'edit' + ? 'Перетаскивайте углы на поле' + : 'Результат matrix3d() трансформации'; requestAnimationFrame(updateLivePreview); } diff --git a/style.css b/style.css index 0bf1a7c..9b6ae9b 100644 --- a/style.css +++ b/style.css @@ -76,6 +76,14 @@ header p { color: #fff; } +.mode-hint { + font-size: 14px; + color: var(--accent); + font-weight: 500; + margin-right: 8px; + white-space: nowrap; +} + main { display: grid; grid-template-columns: 1fr 340px;