ビューポートの中央に変換原点を計算する

Question

絶対配置された要素のプロパティをjavacript transform-originで計算しようとしているので、ホバー上のビューポート全体が満たされます。

xをウィンドウ幅で、yをウィンドウの高さで割って計算しようとしました。ここでxは左側のビューポートエッジからの要素の中心までの距離で、yはvieportのトップと要素の中心の距離です。残念なことに、要素はそのように完全に中央揃えされておらず、画面を塗りつぶすには適切なサイズを持っていますが、画面全体を満たしません。/

transform-originのピボット位置を正しく計算する方法？ここで

あなたはデモを持っている：

let blocks = document.querySelectorAll("a.block"); 
 
console.log(blocks); 
 

 
Array.prototype.slice.call(blocks).forEach((block) => { 
 
\t console.log(block); 
 
    let blockRect = block.getBoundingClientRect(); 
 
\t 
 
    let originX = (blockRect.left + blockRect.width /2)/window.innerWidth * 100, 
 
    \t originY = (blockRect.top + blockRect.height /2)/window.innerHeight * 100; 
 
\t block.style.transformOrigin = `${originX}% ${originY}%`; 
 
});

.block{ 
 
    position: absolute; 
 
    left: 5%; 
 
    top: 10%; 
 
    width: 10%; 
 
    height: 10%; 
 
    background: red; 
 
    -webkit-transition: transform 1s; 
 
    transition: transform 1s; 
 
} 
 
    
 
.block.second{ 
 
    left: 87%; 
 
    top: 26%; 
 
} 
 
.block:hover{ 
 
    -webkit-transform: scale3d(10,10,1); 
 
    transform: scale3d(10,10,1); 
 
}

<a href="#" class="block"></a> 
 
<a href="#" class="block second"></a>

Answer 1

私は幾何学の私の知識をリフレッシュし私は正しい数式を見つけました。 xおよびyは[X放置し、yのトップ】エッジは、要素の幅と同じ単位に変換からの距離である

transform-origin-x = scale * x/(scale-1) 
transform-origin-y = scale * y/(scale-1) 

。

Percentage x distance = left[px]/window.innerWidth[px] * 100 
Percentage y distance = top[px]/window.innerHeight[px] * 100 

let blocks = document.querySelectorAll("a.block"); 
 

 
Array.prototype.slice.call(blocks).forEach((block) => { 
 

 
    let blockRect = block.getBoundingClientRect(); 
 
\t 
 
\t let originX = (10 * (blockRect.left/window.innerWidth * 100))/9, 
 
    \t originY = (10 * (blockRect.top/window.innerHeight * 100))/9; 
 
    
 

 
\t block.style.transformOrigin = `${originX}% ${originY}%`; 
 
});

.block{ 
 
    position: absolute; 
 
    left: 5%; 
 
    bottom: 10%; 
 
    width: 10%; 
 
    height: 10%; 
 
    background: red; 
 
    -webkit-transition: transform 1s; 
 
    transition: transform 1s; 
 

 
} 
 

 
.block.second{ 
 
    left: 87%; 
 
    bottom: auto; 
 
    top: 17%; 
 
} 
 

 
.block:hover{ 
 
    -webkit-transform: scale3d(10,10,1); 
 
    transform: scale3d(10,10,1); 
 
}

<a href="#" class="block"></a> 
 
<a href="#" class="block second"></a>

Answer 2

は、JavaScriptでこれをやりたい理由を、特別な理由はありますか？あなただけのアニメーションをしたい場合は、単に位置やページ全体をカバーし、うまくそれをアニメーション化するトランジションを使用するように要素の寸法を設定することにより、純粋なCSSでそれを行うことができます。

.block{ 
    position: absolute; 
    left: 5%; 
    right: 85%; 
    top: 10%; 
    bottom: 80%; 
    width: 10%; 
    height: 10%; 
    background: red; 
    -webkit-transition: all 1s; 
    transition: all 1s; 
} 

.block.second{ 
    left: 87%; 
    top: 26%; 
} 
.block:hover{ 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    width: 100%; 
    height: 100%; 
}