小编Lev*_*ole的帖子

我正在努力让方向感知悬停和css转换正常工作.基本上我正在尝试使用具有正面和背面的元素网格,并且当悬停时具有css过渡以翻转该元素以显示背面.

转换示例(没有方向感知):小提琴

正如您所看到的,无论您的鼠标以哪种方式进入元素,它总是会翻转.我想让它以鼠标进/出的方式翻转.

例:

这是我对方向感知的尝试:小提琴

我正在使用jQuery添加与鼠标进/出方向相关的类.

.hover-in-top {}
.hover-in-right {}
.hover-in-bottom {}
.hover-in-left {}

.hover-out-top {}
.hover-out-right {}
.hover-out-bottom {}
.hover-out-left {}

正如你从方向感知的例子中看到的那样,它有点有用,但是有一些重大的故障我无法理解.(我一直在思考这个,我的大脑刚刚崩溃.)

无论如何,我希望这是有道理的.谢谢.

我有一个在 x 轴上旋转的 3D css 轮/圆柱动画。我的问题是动画似乎在容器外上下移动。下面的示例 GIF...

上面的代码可以在这里找到：https : //jsfiddle.net/thelevicole/bkt0v1mc/

(function($) {

  const $wheel = $('.wheel .wheel__inner');
  const items = 28;
  const diameter = $wheel.height();
  const radius = diameter / 2;
  const angle = 360 / items;
  const circumference = Math.PI * diameter;
  const height = circumference / items;

  for (let i = 0; i < items; i++) {
    var transform = `rotateX(${ angle * i }deg) translateZ(${ radius }px)`;

    $('<div>', {
      class: 'wheel__segment'
    }).css({
      'transform': transform,
      'height': height, …

我有一个jQuery函数更改background-position三个元素的属性,mousemove这似乎导致一些性能问题.

应该注意,这些元素的背景图像是SVG.

示例代码:

$(window).on('mousemove', function(event) {
    window.requestAnimationFrame(function() {

        $banner.find('.pattern').each(function(key) {

            var modifier = 20 * (key + 1);

            $(this).css({
                'background-position': (event.pageX / modifier)+'px '+(event.pageY / modifier)+'px'
            });

        });

    });
});

在这里查看我的工作代码:https://codepen.io/thelevicole/project/full/DarVMY/

我正在使用,window.requestAnimationFrame()我也有will-change: background-position;每个元素的css属性.

你可能会说,这种影响是滞后的.在较大的窗户尺寸上似乎会变得更糟.

我很确定这个问题是由于使用SVG代替PNG而导致的.我使用SVG的原因是因为高像素密度屏幕.

如果有人能够提供一些有关如何改进FPS的见解,而不必使用非常棒的PNG.谢谢.