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

Question

我目前正在为我的公司做一个网络元素，我遇到了麻烦。我有这样的代码:

//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，但该代码显然与我的预期相反。那我该如何解决呢？

谢谢。

我应该早点提到这个，我想要来自这个网站的.home-panel之类的东西http://espn.com/espn/feature/story/_/id/19742921/espn-body-issue-2017或至少更近。如果您有更好的方法，请帮助我。

Answer 1

.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)'
     });
  });