Scroll effect with opacity works but with transfform does not

Question

Good evening, I have this code that works one part and the other part does not.

    $(document).on('scroll', function() {
/* funciona */
    var max_opacity_arrow = 0.3;
    var min_opacity_arrow = 0.1;
    var opacity_arrow = max_opacity_arrow * (1 - $(this).scrollTop() / $(window).height());
    if (opacity_arrow > min_opacity_arrow) {
        opacity_arrow = opacity_arrow;
    } else {
        opacity_arrow = min_opacity_arrow; }
    $('div.home.show div.bottom.arrow').css('opacity', opacity_arrow);

/* não funciona */
    var max_pespective_rotatex = 0;
    var min_pespective_rotatex = 90;
    var rotateX = max_pespective_rotatex * (1 - $(this).scrollTop() / $(window).height());
    if (rotateX > min_pespective_rotatex) {
        rotateX = rotateX;
    } else {
        rotateX = min_pespective_rotatex; }
    $('div.primeirapagina div.mainpespective').css('transform', rotateX + 'deg'); });

The bottom part in question is a copy of the top, but only when I use the TRANSFORM that does not work, if I change there at the end . css('Transform' the Transform for anything else, it works but if I return the Transform, it doesn’t work, what I want is that just like when I roll the page the Arrow goes missing, I want a div to go around until I’m facing the other way or 0 how could I do it any other way that works? grateful in advance.

Answer 1

There were two problems with your code. One was that you were passing transform: 90deg instead of transform: rotate(90deg). The other is that the function that calculates the rotateX was always giving the same value so it did not rotate. That I didn’t fix completely, I just reversed the if signal and added a multiplier for different values and box rotate in the example.

$(document).on('scroll', function() {
/* funciona */
    var max_opacity_arrow = 0.3;
    var min_opacity_arrow = 0.1;
    var opacity_arrow = max_opacity_arrow * (1 - $(this).scrollTop() / $(window).height());
    if (opacity_arrow > min_opacity_arrow) {
        opacity_arrow = opacity_arrow;
    } else {
        opacity_arrow = min_opacity_arrow; }
    $('div.home.show div.bottom.arrow').css('opacity', opacity_arrow);

/* não funciona */
    var max_pespective_rotatex = 1;
    var min_pespective_rotatex = 9;
    var rotateX = max_pespective_rotatex * (1 - $(this).scrollTop() / $(window).height());
    if (rotateX < min_pespective_rotatex) {
        rotateX = rotateX;
    } else {
        rotateX = min_pespective_rotatex; }
    
    $('div.primeirapagina div.mainpespective').css('transform', 'rotate('+rotateX*100+'deg)');
  });

body {
    height: 5000px;
}
.bottom {
  background: black;
  width: 100px;
  height: 100px;
  display: block;
  position: fixed;
  top: 0; left: 0;
}

.mainpespective {
  background: blue;
  width: 100px;
  height: 100px;
  display: block;
  position: fixed;
  top: 0; left: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="home show">
  <div class="bottom arrow"></div>
</div>
<div class="primeirapagina">
  <div class="mainpespective"></div>
</div>

Answer 2

With the remark of @Ricardo Moraleida I managed to get to the following code

        var max_pespective_rotatex = 90;
    var min_pespective_rotatex = 0;
    var rotateX = max_pespective_rotatex - ( max_pespective_rotatex * ($(this).scrollTop() / $(window).height()));
    console.log(rotateX);
    if (rotateX > max_pespective_rotatex) {
        rotateX = max_pespective_rotatex;
    } else {
        rotateX = rotateX; }
    if (rotateX < min_pespective_rotatex) {
        rotateX = min_pespective_rotatex;
    } else {
        rotateX = rotateX; }
    $('div.primeirapagina div.mainpespective').css('transform', 'rotatex(' + rotateX + 'deg)');

Where I managed to put the stop and reformulate the logic, leaving here for those who need one day.