CSS Transform Rotate 3D - Наведите курсор на каждый угол карты - PullRequest
Новая
       29

CSS Transform Rotate 3D - Наведите курсор на каждый угол карты

0 голосов
/ 11 октября 2019

Я пытаюсь использовать вращение css 3d, чтобы имитировать нажатие на карту, когда мышь наводит курсор на нее, разделенную на 4 квадранта. Слева вверху, вверху справа, внизу слева, внизу справа. Я получил верхний левый / правый для работы, но независимо от того, какую комбинацию я пробую, я не могу заставить нижние эффекты работать так же, как верхние. Любая идея, как сделать так, чтобы нижний левый / правый выглядели правильно, как будто их толкают так же, как верхние углы выглядят правильно? Кроме того, если есть лучший способ сделать это полностью в css / js, дайте мне знать, что я просто балуюсь этими преобразованиями css в первый раз.

Я добавил тени, чтобы попытаться помочь "продать"эффект выталкивания дна, когда верх выскакивает, но все равно выглядит неправильно. Может быть, я, обманка чего-то. 

function ThzhotspotPosition(evt, el, percent) {
  var left = el.offset().left;
  var top = el.offset().top;
  if (percent) {
    x = (evt.pageX - left) / el.outerWidth() * 100;
    y = (evt.pageY - top) / el.outerHeight() * 100;
  } else {
    x = (evt.pageX - left);
    y = (evt.pageY - top);
  }

  return {
    x: Math.round(x),
    y: Math.round(y)
  };
}

$(".card").mousemove(function(e) {
  var hp = ThzhotspotPosition(e, $(this), true); // true = percent | false or no attr = px

  if (hp.x >= 50 && hp.y >= 50) {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    }).addClass("roll-BR");
  } else if (hp.x >= 50 && hp.y < 50) {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    }).addClass("roll-TR");
  } else if (hp.x < 50 && hp.y >= 50) {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    }).addClass("roll-BL");
  } else {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    }).addClass("roll-TL");
  }

  $('#debug').text(hp.x + '%x' + ' ' + hp.y + '%y');
});


$(".card").hover(
  function(e) {
    //$( this ).addClass( "roll-left" );

  },
  function() {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    });
  }
);
.card {
    width: 100px;
    height: 150px;
    background: red;
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
}

.card.roll-TL {
    transform: rotate3d(1, -1, 0, 20deg);
    -webkit-box-shadow: 5px 5px 13px 2px rgba(0,0,0,0.41); 
    box-shadow: 5px 5px 13px 2px rgba(0,0,0,0.41);
    
}
.card.roll-TR {
    transform: rotate3d(-1, -1, 0, -20deg);
    -webkit-box-shadow: -5px 5px 13px 2px rgba(0,0,0,0.41); 
    box-shadow: -5px 5px 13px 2px rgba(0,0,0,0.41);
}

.card.roll-BL {
    transform: rotate3d(-1, -1, 0, 20deg);
    -webkit-box-shadow: 5px -5px 13px 2px rgba(0,0,0,0.41); 
    box-shadow: 5px -5px 13px 2px rgba(0,0,0,0.41);
}

.card.roll-BR {
    transform: rotate3d(1, -1, 0, -20deg);
    -webkit-box-shadow: -5px -5px 13px 2px rgba(0,0,0,0.41); 
    box-shadow: -5px -5px 13px 2px rgba(0,0,0,0.41);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">Testing</div>
<div id="debug"></div>

1 Ответ

1 голос
/ 11 октября 2019

Я предполагаю, что ваш код js правильный (так как я не вижу проблем при его запуске) и просто настраиваю некоторые css. 

function ThzhotspotPosition(evt, el, percent) {
  var left = el.offset().left;
  var top = el.offset().top;
  if (percent) {
    x = (evt.pageX - left) / el.outerWidth() * 100;
    y = (evt.pageY - top) / el.outerHeight() * 100;
  } else {
    x = (evt.pageX - left);
    y = (evt.pageY - top);
  }

  return {
    x: Math.round(x),
    y: Math.round(y)
  };
}

$(".card").mousemove(function(e) {
  var hp = ThzhotspotPosition(e, $(this), true); // true = percent | false or no attr = px

  if (hp.x >= 50 && hp.y >= 50) {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    }).addClass("roll-BR");
  } else if (hp.x >= 50 && hp.y < 50) {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    }).addClass("roll-TR");
  } else if (hp.x < 50 && hp.y >= 50) {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    }).addClass("roll-BL");
  } else {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    }).addClass("roll-TL");
  }

  $('#debug').text(hp.x + '%x' + ' ' + hp.y + '%y');
});


$(".card").hover(
  function(e) {
    //$( this ).addClass( "roll-left" );

  },
  function() {
    $(this).removeClass(function(index, className) {
      return (className.match(/(^|\s)roll-\S+/g) || []).join(' ');
    });
  }
);
.card {
  width: 200px;
  height: 280px;
  background: red;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

/*the backside*/
.card:after{
  content:'';
  position:absolute;
  left:0;top:0;right:0;bottom:0;
  background: gray;
  transform: translateZ(-10px);
}

.card.roll-TL {
  transform: rotate3d(1, -1, 0, 20deg);
}

.card.roll-TR {
  transform: rotate3d(-1, -1, 0, -20deg);
}

.card.roll-BL {
  transform: rotate3d(-1, -1, 0, 20deg);
}

.card.roll-BR {
  transform: rotate3d(1, -1, 0, -20deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">Testing</div>
<div id="debug"></div>
...