如何解决 iOS 上的 3D 动画 CSS 问题 (Safari / Chrome)
How to fix the problem with 3D animation CSS on iOS (Safari / Chrome)
我有类似浏览器游戏的东西。
点击用户掷骰子。骰子穿过阴影落下,但有不同的方块,骰子的 z-index :3 和阴影 z-index :2;
此问题仅出现在 iOS。
对于动画使用库 anime.js。
也许有人有同样的问题。
尝试添加屏幕截图以显示问题:
.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
}, ],
});
问题解决了!我有 DOM 个元素在父块之外。当我将它们定位到父块区域并添加不透明度以隐藏它们时 - 我的骰子就位了。
例子:
是:
#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%;
}
}
现在:
#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;
}
}
我有类似浏览器游戏的东西。 点击用户掷骰子。骰子穿过阴影落下,但有不同的方块,骰子的 z-index :3 和阴影 z-index :2; 此问题仅出现在 iOS。 对于动画使用库 anime.js。 也许有人有同样的问题。
尝试添加屏幕截图以显示问题:
.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
}, ],
});
问题解决了!我有 DOM 个元素在父块之外。当我将它们定位到父块区域并添加不透明度以隐藏它们时 - 我的骰子就位了。 例子: 是:
#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%;
}
}
现在:
#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;
}
}