居中縮放元素超出窗口的寬度和高度

Question

我有一個div #content-wrapper，嵌套在裏面的是一格#canvas-blur和main元素。所有元素應該與視口/窗口的寬度和高度相同，但是＃canvas-blur的CSS transform: scale(1.1);會使其變大。在#canvas-blur div內有一個設置爲視口/窗口大小的畫布元素，在此畫布上，我創建了一個跟蹤鼠標位置的繪畫工具。問題是#canvas-blur從左上角（請參閱附錄1）縮放，這會影響畫布上的鼠標位置（請參見圖片）。我需要#canvas-blur來像中心一樣擴展（見附錄2）。這意味着main和#canvas-blur將具有相同的中心點並將像附錄3中所示一起滾動。任何指向正確方向的指針都將很有用。

編輯：添加JSFiddle

<div id="content-wrapper"> 
    <main> 

    </main> 
    <div id="canvas-blur"> 
     <canvas> 
    </div> 
</div> 

CSS

#content-wrapper { 
    height: 100vh; 
    width: 100vw; 
} 
#canvas-blur { 
    z-index: -1; 
    position: relative; 
    transform: scale(1.1); 
} 
main { 
    height: 100vh; 
    width: 100vw; 
    box-sizing: border-box; 
    position: absolute; 
    z-index: 2; 
    display: flex; 
} 

MOUSE

Answer 1

聽起來像轉換起源可能是你需要的。

嘗試添加這＃帆布模糊

transform-origin: center; 

因爲你使用Flex你也嘗試添加這主要的內容水平和垂直中心：

align-items: center; 
justify-content: center;