搜索
搜索

Safari 11.0.1：3d 变换错误

masfmqowkf 发表于 Dev
10
马斯福克夫

我正在使用 CSS3 3d 变换处理一个打开的立方体，它在 Chrome、Firefox 和 Opera 中运行良好。但是，在 Safari 中，由于某种原因，立方体正在移动到一个奇怪的地方。

let isExpanded = false;
let cube = document.querySelector(".cube");

document.querySelector("#toggle").onclick = function(e) {
  e.preventDefault();
  document.querySelector("#toggle").disabled = true;
  toggle();
}

function toggle() {
  if (!isExpanded) {
    isExpanded = true;
    // Pause Rotation
    document.querySelector(".cube").classList.add("pause");
    // Open Cube
    open();
  } else {
    isExpanded = false;
    close();
  }
}

function close() {
  // Close the cube
  cube.classList.remove("open");
  cube.style.bottom = "0";
  // Rotate to the start position and restart animation
  setTimeout(function() {
    cube.classList.remove("origin-bottom");
  }, 1000); // >= side transform's transition time
  setTimeout(function() {
    cube.style.animation = "spin 15s infinite linear";
    cube.style.webkitAnimation = "spin 15s infinite linear";
    document.querySelector("#toggle").disabled = false;
  }, 1200);
}

function open() {
  // Set transform value to current position & Disable Animation
  prop = window.getComputedStyle(cube, null).getPropertyValue("transform");
  cube.style.transform = prop;
  cube.style.webkitTransform = prop;
  cube.style.MozTransform = prop;
  cube.style.msTransform = prop;
  cube.style.OTransform = prop;
  cube.style.animation = "none";
  cube.style.webkitAnimation = "none";
  // Rotate the cube to its initial position & Remove pause
  setTimeout(function() {
    cube.classList.remove("pause");
    cube.classList.add("origin-bottom");
    cube.style.transform = "rotateX(-20deg) rotateY(42deg)";
    cube.style.webkitTransform = "rotateX(-20deg) rotateY(42deg)";
    cube.style.MozTransform = "rotateX(-20deg) rotateY(42deg)";
    cube.style.msTransform = "rotateX(-20deg) rotateY(42deg)";
    cube.style.OTransform = "rotateX(-20deg) rotateY(42deg)";
  }, 50);
  // Open the cube
  setTimeout(function() {
    cube.classList.add("open");
    document.querySelector("#toggle").disabled = false;
  }, 1000); // >= side transform's transition time
}
body {background: #333;}
.cube-wrapper {
  margin: auto;
  width: 200px;
  height: 200px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
  -webkit-perspective: 600px;
  perspective: 600px;
  perspective-origin: 50% 50%;
}
.cube-wrapper .cube {
  width: 200px;
  height: 200px;
  position: relative;
  bottom: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  backface-visibility: visible;
  transition: all 1s ease-in-out;
  animation: spin 15s infinite linear;
}
.cube-wrapper .cube .side {
  transition: transform 1s ease-in-out, background 0.5s ease-in-out, opacity 0.5s ease-in-out;
  outline: 1px solid rgba(250, 250, 250, 0.3);
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
}
.cube-wrapper .cube .right {
  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .left {
  transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .top {
  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .bottom {
  transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .front {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .behind {
  transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) translateZ(100px);
}
/* pause */
.preserve3d .cube-wrapper .cube.pause, .preserve3d .cube-wrapper .cube:hover {
  -webkit-animation-play-state: paused !important;
  animation-play-state: paused !important;
}
/* open */
.preserve3d .cube-wrapper .cube.open .right {
  transform: rotateY(90deg) rotateX(-90deg) translateY(-100px) !important;
}
.preserve3d .cube-wrapper .cube.open .left {
  transform: rotateY(-90deg) rotateX(-90deg) translateY(-100px) !important;
}
.preserve3d .cube-wrapper .cube.open .front {
  transform: rotateX(-90deg) translateY(-100px) !important;
}
.preserve3d .cube-wrapper .cube.open .behind {
  transform: rotateY(180deg) rotateX(-90deg) translateY(-100px) !important;
}
.preserve3d .cube-wrapper .cube.origin-bottom .right {
  transform-origin: bottom !important;
}
.preserve3d .cube-wrapper .cube.origin-bottom .left {
  transform-origin: bottom !important;
}
.preserve3d .cube-wrapper .cube.origin-bottom .top {
  opacity: 0;
  pointer-events: none;
}
.preserve3d .cube-wrapper .cube.origin-bottom .front {
  transform-origin: bottom !important;
}
.preserve3d .cube-wrapper .cube.origin-bottom .behind {
  transform-origin: bottom !important;
}
/* animation */
@keyframes spin {
  from {
    transform: rotateX(-20deg) rotateY(42deg);
  }
  to {
    transform: rotateX(340deg) rotateY(382deg);
  }
}
<button id="toggle">toggle</button>
<div class="preserve3d">
  <div class="cube-wrapper">
    <div class="cube">
      <div class="side right">Right
      </div>
      <div class="side left">Left
      </div>
      <div class="side top">Top
      </div>
      <div class="side bottom">Bottom
      </div>
      <div class="side front">Front
      </div>
      <div class="side behind">Behind
      </div>
    </div>
  </div>
</div>

虽然它被移动到一个奇怪的位置，但检查员说它在一个正确的地方。使用 getComputedStyle 也给出了正确的值，所以我不知道如何调试这个问题。

我搜索并发现Safari在rotateY方面存在一些问题并尝试了给定的解决方案，给出了z-index值，但没有用。

这是代码的缩短版本：https : //jsfiddle.net/7mxghcq9/

提前谢谢你:)

海道

对不起，我不能确定会发生什么，也不能确定 Safari 的行为是否完全错误......

无论如何，一个可行的解决方案是将cube.style.animation = 'none';第一个超时时间移到内部，然后在删除其暂停状态之前触发回流。

function open() {
  // Set transform value to current position
  prop = window.getComputedStyle(cube, null).getPropertyValue("transform");

  cube.style.transform = prop;
  cube.style.webkitTransform = prop;
  cube.style.MozTransform = prop;
  cube.style.msTransform = prop;
  cube.style.OTransform = prop;
  
  // Disable Animation & Rotate the cube to its initial position & Remove pause
  setTimeout(function() {
    cube.style.animation = "none";
    cube.offsetWidth; // force a reflow
    cube.classList.remove("pause");
    cube.classList.add("origin-bottom");
    cube.style.transform = "rotateX(-20deg) rotateY(42deg)";
  }, 50);
  // Open the cube
  setTimeout(function() {
    cube.classList.add("open");
    document.querySelector("#toggle").disabled = false;
  }, 1000); // >= side transform's transition time
}

let isExpanded = false;
let cube = document.querySelector(".cube");

document.querySelector("#toggle").onclick = function(e) {
  e.preventDefault();
  document.querySelector("#toggle").disabled = true;
  toggle();
}

function toggle() {
  if (!isExpanded) {
    isExpanded = true;
    // Pause Rotation
    document.querySelector(".cube").classList.add("pause");
    // Open Cube
    open();
  } else {
    isExpanded = false;
    close();
  }
}

function close() {
  // Close the cube
  cube.classList.remove("open");
  cube.style.bottom = "0";
  // Rotate to the start position and restart animation
  setTimeout(function() {
    cube.classList.remove("origin-bottom");
  }, 1000); // >= side transform's transition time
  setTimeout(function() {
    cube.style.animation = "spin 15s infinite linear";
    cube.style.webkitAnimation = "spin 15s infinite linear";
    document.querySelector("#toggle").disabled = false;
  }, 1200);
}
body {background: #333;}
.cube-wrapper {
  margin: auto;
  width: 200px;
  height: 200px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
  -webkit-perspective: 600px;
  perspective: 600px;
  perspective-origin: 50% 50%;
}
.cube-wrapper .cube {
  width: 200px;
  height: 200px;
  position: relative;
  bottom: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  backface-visibility: visible;
  transition: all 1s ease-in-out;
  animation: spin 15s infinite linear;
}
.cube-wrapper .cube .side {
  transition: transform 1s ease-in-out, background 0.5s ease-in-out, opacity 0.5s ease-in-out;
  outline: 1px solid rgba(250, 250, 250, 0.3);
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
}
.cube-wrapper .cube .right {
  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .left {
  transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .top {
  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .bottom {
  transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .front {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(100px);
}
.cube-wrapper .cube .behind {
  transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) translateZ(100px);
}
/* pause */
.preserve3d .cube-wrapper .cube.pause, .preserve3d .cube-wrapper .cube:hover {
  -webkit-animation-play-state: paused !important;
  animation-play-state: paused !important;
}
/* open */
.preserve3d .cube-wrapper .cube.open .right {
  transform: rotateY(90deg) rotateX(-90deg) translateY(-100px) !important;
}
.preserve3d .cube-wrapper .cube.open .left {
  transform: rotateY(-90deg) rotateX(-90deg) translateY(-100px) !important;
}
.preserve3d .cube-wrapper .cube.open .front {
  transform: rotateX(-90deg) translateY(-100px) !important;
}
.preserve3d .cube-wrapper .cube.open .behind {
  transform: rotateY(180deg) rotateX(-90deg) translateY(-100px) !important;
}
.preserve3d .cube-wrapper .cube.origin-bottom .right {
  transform-origin: bottom !important;
}
.preserve3d .cube-wrapper .cube.origin-bottom .left {
  transform-origin: bottom !important;
}
.preserve3d .cube-wrapper .cube.origin-bottom .top {
  opacity: 0;
  pointer-events: none;
}
.preserve3d .cube-wrapper .cube.origin-bottom .front {
  transform-origin: bottom !important;
}
.preserve3d .cube-wrapper .cube.origin-bottom .behind {
  transform-origin: bottom !important;
}
.cube.origin-bottom{
  animation-fill-mode: forwards;
}
/* animation */
@keyframes spin {
  from {
    transform: rotateX(-20deg) rotateY(42deg);
  }
  to {
    transform: rotateX(340deg) rotateY(382deg);
  }
}
<button id="toggle">toggle</button>
<div class="preserve3d">
  <div class="cube-wrapper">
    <div class="cube">
      <div class="side right">Right
      </div>
      <div class="side left">Left
      </div>
      <div class="side top">Top
      </div>
      <div class="side bottom">Bottom
      </div>
      <div class="side front">Front
      </div>
      <div class="side behind">Behind
      </div>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Safari 11中的SVG动画错误

Safari动画（关键帧和变换）设置错误的位置

D3D11CreateDevice 0x887a002d错误

如何解决无效的头签名；读取 0x6576206C6D783F3C，预期为 0xE11AB1A1E011CFD0 错误 java？

简单 2D 变换的错误结果

傅立叶如何变换1和0的数组

分割错误：使用动态3D数组参数时为11

无法登录Xbox Windows 8.1-错误0xc00d11cd（0x80004005）

如何平滑 3D 变换旋转？

隐藏初始3d变换动画

CSS滤镜打破3D变换

3d 向量 - 变换和减法

使用3D变换隐藏元素

IE10 / 11 Ajax XHR错误-SCRIPT7002：XMLHttpRequest：网络错误0x2ef3

错误：将3D Matlab数组转换为0维np数组

3d 变换：DOM 顺序优先于 z 变换

3D变换，逆变换不对称

Android从线程错误中调用jni方法（A / libc：致命信号11（SIGSEGV），代码1，在tid 13620（AsyncTask＃3）中的故障加法器0xdeadbaad）

如何消除错误“致命信号11（SIGSEGV），代码1，故障加法器0x70”

在0xdeadd00d（code = 1），线程17729运行JNI android app A / libc：致命信号11（SIGSEGV）时收到错误消息

Safari SVG变换原始缩放动画

“ conn 0x7f7d6c001610错误：i = -2 errno = 11状态= 4 rc = 3 br = 721”出现在nxweb日志中

运行时错误'713'：未注册类以查找具有clsid的对象：{59245250-7A2F-11D0-9482-00A0C9111OED}

在Safari 11中打开多个弹出窗口

无法使用Safari检查iOS 11设备

iOS 11 Safari记住相机权限

Safari列呈现错误

Safari foreignObject getBBox错误

Knockout safari 验证错误

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档