Question

＆＃13;

world {
  width: 100%;
  height: 100%;
  position: absolute;
  perspective:800px;
}
bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z:1;
  transform:rotateX(20deg) rotateY(10deg);
  background: url(https://images.pexels.com/photos/1154498/pexels-photo-1154498.jpeg?auto=compress&cs=tinysrgb&h=1250);
}
layer_wrap {
  width: 350px;
  height: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  mix-blend-mode: overlay;
  z:100;
  perspective:500px;
  transform-style:flat;
  backface-visibility:hidden;
}

layer {
 position:relative;
  background: rgba(0, 122, 255,0.8);
  padding: 20px;
  color: #fff;
  text-transform: uppercase;
  font-family: "Arial";
  font-size: 30px;
  text-align: center;
  transformOrigin:50% 50% 50%;
  transform:translateX(-50%) translateY(-50%) rotateX(30deg) rotateY(5deg) translateZ(0.001px);
}

＆＃13;

<world>
  <bg></bg>
  <layer_wrap>
    <layer>THIS IS A LAYER</layer>
  </layer_wrap>
</world>

＆＃13;

在示例中，bg容器和layer_wrap容器必须位于同一级别才能使用mix-blend-mode以及Project的其他要求。

结果如何在Safari和Chrome中呈现它是不同的。 Safari将一半的Layer渲染为一个容器中的整个世界。 transformStyle preserve-3d或其他技巧没有帮助。

此外，transformZ不是解决方案，因为它会改变查看器的大小和距离。

希望你们其中一个人有一个很好的解决方案。干杯！

关于旋转元素的Safari渲染问题

0 个答案: