javascriptでtransleteZの現在値を取得したい

Question

※miyabi_takatsuk様ご指摘ありがとうございます。

ご覧いただきありがとうございます。現在奥行きのあるウェブサイトの制作に挑戦しております。

CSSにあるtransform:translateZ**( n px)**
のnの値をjavascriptから取得する方法を教えてください。

問題となっているコード部分は、コメントアウトで☆★を打っている部分の直下です。あの記述でconsoleを確認すると、cssstyledeclationが表示され、下に遡ると
transform:"matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 3.88, 1)"
という部分があります。ここの太字の値値を取得したいと考えております。理由としては、この後ろから二番目の値が、translateZの現在値と一致しているので、ここを取得する必要があるのではないかと考えているためです。
ですが初心者のため、私の推測は的を外しているものかもしれませんので、matrix3dからとらずにできる方法でも大丈夫です。アドバイスいただけると幸いです。よろしくお願いいたします。

var scrollElm = (function() {
  if('scrollingElement' in document) {
    return document.scrollingElement;
  }
  if(navigator.userAgent.indexOf('WebKit') != -1) {
    return document.body;
  }
  return document.documentElement;
})();

// 全てのセクション要素を取得
var sections = document.querySelectorAll('.section');

// 全体をz方向に動かす#scaler要素を取得
var scaler = document.getElementById('scaler');

// 画面の高さを設定する#scroll要素を取得
var scrollDiv = document.getElementById('scroll');

//☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
var getZ = window.getComputedStyle(scaler, null);
console.log(getZ);
//☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★


// セクション要素のdata-z属性を取得し、transformを設定
// 最後のセクション要素のdata-zを元に、画面の高さを計算して設定
for(var i = 0; sections.length > i; i++) {
  var itemZ = sections[i].getAttribute('data-z');
  var itemX = sections[i].getAttribute('data-x');
  var itemY = sections[i].getAttribute('data-y');
  sections[i].style.transform = 'translateZ(' + - itemZ + 'px)';
  if(i === sections.length -1) {
    scrollDiv.style.height = itemZ + window.innerHeight + 'px';
    
  }
}


// スクロールイベントで、#scaler要素のtransformでz軸を動かす
window.addEventListener('scroll', function() {
  scaler.style.transform = 'translateZ(' + scrollElm.scrollTop / 100 + 'px)';
});

  <div class="wrapper">
    <div id="base">
      <div id="scaler" class="scaler">
        <img class="section section-1" data-z="6" data-x="20" data-y="80" src="img/06.jpg" alt="">
        <img class="section section-1" data-z="5" data-x="70" data-y="30" src="img/05.jpg" alt="">
      </div>
  </div>

  <div id="scroll" class="scroll"></div>
  </div>

Comments

[miyabi_pudding]

間のJavaScriptもコードブロックで記載しましょう。
質問は編集できます。

また、matrix3dにて指定している数値の、最後から二番目を取得したい、ということでよろしいですか？
（具体的に取りたい値の基準を知りたい）

Answer 1

jQuery などの DOMエンジンもスタイルの値は文字列を取得して、数値化する内部処理だったと思います。
なので、matrix3d を取得して文字列文字列処理で対応するのが手っ取り早そうですね。

正規表現で行列部分を抽出して配列化する

let re_mat3d = /^matrix3d((.*))$/
, m = matrix3d.match(re_mat3d)
;
if( m ) {
  // m を行列（Array）に矯正
  m = m[1].split(/,\s*/).map( n => Number(n) )
  console.log( m ) // 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 3.88, 1
}

思いつきで、検証まではしてませんm(_ _)m

うまくいけば、配列から取得できます