简体   繁体   English

如何解决 iOS (Safari / Chrome) 上 3D 动画 CSS 的问题

[英]How to fix the problem with 3D animation CSS on iOS (Safari / Chrome)

I have something like browser game.我有类似浏览器游戏的东西。 On click user throw dices.点击用户掷骰子。 Dices fall through shadow, but there are different block and dice has z-index : 3 and shadow z-index : 2;骰子穿过阴影,但有不同的块,骰子有 z-index : 3 和 shadow z-index : 2; This problem only on iOS.此问题仅在 iOS 上。 For animation use library anime.js.对于动画使用库anime.js。 Maybe someone had the same problem.也许有人有同样的问题。

Try to add screenshot for show the problem:尝试添加屏幕截图以显示问题:

在此处输入图片说明

.dice {
  width: 144px;
  height: 144px;
  left: -200px;
  top: -450px;
  z-index: 3;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: translateZ(-72px) rotateX(313deg) rotateY(226deg) scale3d(0.35, 0.35, 0.35);
  z-index: 3;
  .cube_face {
    width: 144px;
    height: 143px;
    border: 1px solid #f5f3e6;
    border-radius: 15px;
  }
}
<div class="diceShadow"></div>
<div class="dice">
  <div class="cube_face cube_face_front"></div>
  <div class="cube_face cube_face_back big-shadow"></div>
  <div class="cube_face cube_face_right"></div>
  <div class="cube_face cube_face_left shadow"></div>
  <div class="cube_face cube_face_top"></div>
  <div class="cube_face cube_face_bottom"></div>
</div>
anime({
  targets: dices[count],
  left: [{
      value: '-200px',
      duration: 0
    },
    {
      value: dicePositions[count].x - 56,
      duration: duration / 2,
      easing: 'easeInCubic'
    },
    {
      value: dicePositions[count].x + 15,
      duration: duration / 10,
      easing: 'easeOutQuad'
    },
    {
      value: dicePositions[count].x + 30,
      duration: duration / 10,
      easing: 'easeInQuad'
    },
    {
      value: dicePositions[count].x + 84,
      duration: duration / 5,
      easing: 'easeOutQuad'
    },
  ],
  top: [{
      value: '-850px',
      duration: 0
    },
    {
      value: dicePositions[count].y - 30,
      duration: duration / 2,
      easing: 'easeInCubic'
    },
    {
      value: dicePositions[count].y - 95,
      duration: duration / 10,
      easing: 'easeOutQuad'
    },
    {
      value: dicePositions[count].y + 10,
      duration: duration / 10,
      easing: 'easeInQuad'
    },
    {
      value: dicePositions[count].y + 50,
      duration: duration / 5,
      easing: 'easeOutQuad'
    },
  ],
  translateZ: [{
    value: '-72px',
    duration: 0
  }, ],
  rotateX: [{
      value: dicePositions[count].rotateX + 132,
      duration: 0
    },
    {
      value: dicePositions[count].rotateX + 32,
      duration: duration / 2,
      easing: 'easeInOutQuad'
    },
    {
      value: dicePositions[count].rotateX,
      duration: duration / 4,
      delay: duration / 10,
      easing: 'easeOutCubic',
    },
  ],
  rotateY: [{
      value: dicePositions[count].rotateY - 100,
      duration: 0
    },
    {
      value: dicePositions[count].rotateY - 39,
      duration: duration / 2,
      easing: 'easeInOutQuad'
    },
    {
      value: dicePositions[count].rotateY,
      duration: duration / 4,
      delay: duration / 10,
      easing: 'easeOutQuad',
    },
  ],
  rotateZ: [{
    value: dicePositions[count].rotateZ,
    duration: 0
  }, ],
  scaleX: [{
    value: 0.35,
    duration: 0
  }, ],
  scaleY: [{
    value: 0.35,
    duration: 0
  }, ],
  scaleZ: [{
    value: 0.35,
    duration: 0
  }, ],
});

Problem solved!问题解决了! I had DOM elements that were outside parent`s block.我有在父块之外的 DOM 元素。 When I positioned them to parent block area and add opacity, to hide them - my dices fell into place.当我将它们定位到父块区域并添加不透明度以隐藏它们时 - 我的骰子就位。 Example: were :示例:是:

#train {
                width: 158px;
                height: 146px;
                transition: all 0.4s ease-in;
                background: url('../img/train.png') no-repeat center;
                background-size: cover;

                &[data-show='false'] {
                    left: -100%;
                    top: -100%;
                }

                &[data-show='true'] {
                    left: 9%;
                    top: 14%;
                }
            }

now:现在:

#train {
                width: 158px;
                height: 146px;
                transition: all 0.4s ease-in;
                background: url('../img/train.png') no-repeat center;
                background-size: cover;

                &[data-show='false'] {
                    left: 0%;
                    top: 17px;
                    opacity: 0;
                }

                &[data-show='true'] {
                    left: 9%;
                    top: 14%;
                    opacity: 1;
                }
            }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM