2

我做了一张婚礼请柬，请柬底部有一个登录婚礼网站的代码。为了让人们了解我创建了一个小的 CSS3 3D 动画的代码：请参阅演示

HTML：

<section id="viewport">
    <div id="invitation" class="show-front">
        <figure class="front"></figure>
        <figure class="ring"></figure>
    </div>
</section>

CSS：

section#viewport {
    -webkit-perspective: 1000;
    -webkit-perspective-origin: 0% 0%;
}

div#invitation {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s ease;
}

#invitation .front  {
    -webkit-transform: rotateX(12deg) translate3d(0px, 0px, 32px);

#invitation .ring {
    -webkit-transform: rotateY(-90deg) translate3d(6px, -15px, -1px);
}

#invitation.show-front  {
    -webkit-transform: rotateY(-24deg) rotateX(90deg);
}

#invitation:hover {
    -webkit-transform: rotateY(20deg) rotateX(3deg);
}

在 Chrome 和 Firefox 中看起来一切都很好，但在 Safari 中，相交的元素会产生烦人的闪烁问题。如果我删除与前面图片元素相交的环，则不会出现闪烁问题：没有环的演示

我已经尝试了一切并阅读了我能找到的每一篇文章，但没有解决这个问题。演示中所有无用的 html 元素在我的真实动画中并非无用。

4

0 回答 0