javascript - 使用jQuery onresize更改div的位置

我目前正在为公司的Web项目工作，遇到麻烦了。我有这样的代码：

//CSS
.home-panel{
   z-index: 0;
   width: 1800px;
   height: 2100px;
   background: gray;
   transform: skew(0deg,-55deg) translateY(-1920px);
}
.ultimate-hero{
   height:100vh;
   overflow:hidden;
}


  //HTML
  <div class="ultimate-hero">
    <div class="home-panel">
    </div>
  </div>


 //JS
 $(window).resize(function() {
    //get dimensions
    var height = $(window).height();
    var width = $(window).width();
    $('.home-panel').css({
   'transform' : 'skew(0deg,-55deg) translateY(-'+width+'px)'
     });
  });

我想在浏览器调整大小时移动.home-panel，但是该代码显然与我期望的相反。那么我该如何解决呢？

谢谢。

我应该早些提及，我希望从该网站http://espn.com/espn/feature/story/_/id/19742921/espn-body-issue-2017或类似的网站获得.home-panel之类的东西。如果您有更好的方法，请帮助我。

最佳答案

.home-panel{
   z-index: 0;
   width: 1800px;
   height: 2100px;
   background: gray;
   /*transform: skew(0deg,-55deg) translateY(-1920px);*/
}

尝试删除transform: skew(0deg,-55deg) translateY(-1920px);

 //JS
 $(document).ready(function(){
    var height = $(window).height();
    var width = $(window).width();
    $('.home-panel').css({
   'transform' : 'skew(0deg,-55deg) translateY(-'+width+'px)'
     });

 });

 $(window).resize(function() {
    //get dimensions
    var height = $(window).height();
    var width = $(window).width();
    $('.home-panel').css({
   'transform' : 'skew(0deg,-55deg) translateY(-'+width+'px)'
     });
  });