Question

一个简单的动画，可根据水平鼠标位置更改div的变换原点。

它未在Safari 12.1中显示动画。相反，div停留在显示页面加载时具有的转换原点（调整浏览器的大小似乎可以更新它）。

脚本正在将正确的值吐出到元素上，并且没有出现错误，因此需要一些帮助使其动画。

它可以在最新的Chrome，Firefox和Safari 11中运行，只是最新的Safari已损坏。

$(document).mousemove(function(getCurrentPos){
    var xCord = getCurrentPos.clientX;
    var xPercent = xCord/window.innerWidth * 100 + "%";
    document.getElementById("p-beam").style.transformOrigin = xPercent + "100%"; 
});

.beams {
  display: block;
  position: relative;
  overflow: hidden;
  height: 600px;
  background-color: #434343;
}

.p-beam {
  position: absolute;
  left: 0;
  top: -360px;
  right: 0;
  bottom: auto;
  width: 100px;
  height: 360px;
  margin-right: auto;
  margin-left: auto;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#eef));
  background-image: linear-gradient(180deg, transparent, #eef);
  -webkit-transform: perspective(360px) rotateX(-104deg) rotateY(0) rotateZ(0);
  transform: perspective(360px) rotateX(-104deg) rotateY(0) rotateZ(0);
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="beams">
  <div id="p-beam" class="p-beam"></div>
</div>

Answer 1

这看起来像个错误。

我可以通过更改bean的innerHTML / innerText使其工作，我认为这样可以强制布局/绘制。

我担心您要绘制的区域可能太大，即使这是一个错误，也可能太昂贵了，并且您正在达到渲染器的极限。但这只是猜测。

我知道这是不一样的，但是也许您可以只用transform：rotate（）或transform：matrix（）来完成视觉上相似的事情

const beam = document.getElementById("p-beam");
let i=0;

setInterval(()=>{
  i=(i+1)%100;
  const x = `${i%100}% ${100}%`
  beam.style.transformOrigin = x;
  beam.innerHTML = i;
  //console.log(x)
}, 16);

.p-beam {
  position: absolute;
  left: 0;
  top: -360px;
  right: 0;
  bottom: auto;
  width: 100px;
  height: 360px;
  margin-right: auto;
  margin-left: auto;
  background: yellow;
  
  transform: perspective(360px) rotateX(-104deg) rotateY(0) rotateZ(0);
  
  transform-style: preserve-3d;
  box-sizing: border-box;
}

<div class="beams">
  <div id="p-beam" class="p-beam"></div>
</div>

Safari 12.1中的变换原点动画问题

1 个答案: