diff --git a/css/binaural.css b/css/binaural.css
index 423934d..355cb23 100644
--- a/css/binaural.css
+++ b/css/binaural.css
@@ -8,7 +8,7 @@
 
 #screenRow {
     display: block;
-    transform: rotateX(var(--rX)) rotateY(var(--rY));
+    transform: translateZ(var(--tZ)) rotateX(var(--rX)) rotateY(var(--rY));
 }
 
 #screenRow * {
diff --git a/css/common.css b/css/common.css
index 01b1334..af2dfec 100644
--- a/css/common.css
+++ b/css/common.css
@@ -2,6 +2,7 @@
     --cell-side: 24px;
     --rX: -15deg;
     --rY: 0;
+    --tZ: 0;
 }
 
 body {
diff --git a/js/app.js b/js/app.js
index d256f29..f19ef7b 100644
--- a/js/app.js
+++ b/js/app.js
@@ -279,6 +279,7 @@ screenRow.onmousedown = function(event) {
 screenRow.onmousemove = function(event) {
 	if (mousedown) {
         event.preventDefault()
+        event.stopPropagation()
         rX = (rX0 - event.clientY + clientY0 + 360) % 360
         screenRow.style.setProperty("--rX", rX + "deg")
         if (rX <= 180) {
@@ -300,6 +301,15 @@ screenRow.onmousemove = function(event) {
     }
 }
 
-screenRow.onmouseup = function(event) {
+screenRow.onmouseup = screenRow.onmouseleave = function(event) {
     mousedown = false
+}
+
+screenRow.onwheel = function(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    let zoom = parseInt(getComputedStyle(screenRow).getPropertyValue("--tZ"))
+    zoom += event.deltaY
+    screenRow.style.setProperty("--tZ", zoom + "px")
+    console.log(zoom)
 }
\ No newline at end of file