javascript - Store browser width value into translateZ using jquery -

i trying build 3d cube , having trouble translatez property. want width of browser , store translatez particular element. create 3d cube responsive when browser being re-sized. want store value works .auto-size

resizediv();          window.onresize = function(event) {             resizediv();         }         function resizediv() {             vpw = $(window).width();             vph = $(window).height();             $('.auto-size').css({'height': vph + 'px', 'width': vpw + 'px'});             $('.full-z').css({'transform': 'translatez' ( vpw + 'px' ); });         } 

the translatez value given css class can use multiple times different divs. markup follows

<div class="viewport">     <div class="cube">         <div class="cube-side1 auto-size cube-face" id="front">         </div>         <div class="cube-side2 auto-size cube-face full-z" id="back">         </div>         <div class="cube-side3 auto-size cube-face" id="left">         </div>         <div class="cube-side4 auto-size cube-face" id="right">         </div>         <div class="cube-side5 auto-size cube-face" id="top">         </div>         <div class="cube-side6 auto-size cube-face" id="bottom">         </div>     </div> </div> 

it works widths , heights not transform property. have little knowledge of jquery.