回転div。オフスクリーンのスライドインアニメーションを使用する

Question

私は回転させてオフスクリーンにするdivを持っています。 ユーザーがページをスクロールすると、Animate.cssのアニメーションクラスが追加されます これはすべて正常に動作します。しかし回転変換は失われます。

これは私のコードです：

... 
<h1>Hello, world!</h1> 
... 

<div id="backToTop" class="animated"> 
    <i class="fa fa-chevron-up fa-lg" aria-hidden="true"></i> 
</div> 

#backToTop { 
    display: none; 
    background-color: #3b7aad; 
    height: 324px; 
    width: 324px; 
    position: fixed; 
    bottom: -234px; 
    right: -234px; 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
    color: #000; 
} 

    $(document).ready(function() { 
     var backToTop; 
     function yScroll() { 

     backToTop = document.getElementById('backToTop'); 
     yPos = window.pageYOffset; 

     if (yPos > 200) { 
      $('#backToTop').stop(true, true).removeClass('slideOutDown'); 
      $('#backToTop').stop(true, true).addClass('slideInUp'); 
      $('#backToTop').stop(true, true).show(); 
     } else { 
      $('#backToTop').stop(true, true).removeClass('slideInUp'); 
      $('#backToTop').stop(true, true).addClass('slideOutDown'); 
     } 

     } 
     window.addEventListener("scroll", yScroll); 
    }); 

私はそれを修正jsfiddle

https://jsfiddle.net/9L73g5jh/

Answer 1

上でデモを行いました。

回転したdivの周りにラッパーを追加する必要がありました。ここで

は、作業のデモです： https://jsfiddle.net/9L73g5jh/6/

<div id="backToTopWrapper" class="animated"> 
    <div id="backToTop"> 
     <i class="fa fa-chevron-up fa-lg" aria-hidden="true"></i> 
    </div> 
</div> 

#backToTopWrapper { 
    display: none; 
    position: fixed; 
    bottom: -234px; 
    right: -234px; 
}