问题描述:

I made a wedding invitation and there's a code at the bottom of the invitation to log into the wedding website. To make people aware of the code I created a little CSS3 3D animation: see the demo

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);

}

In Chrome and Firefox looks everything well, but in Safari the intersecting elements produce an annoying flicker issue. If I remove the rings which are intersecting the front picture element the flicker issue don't appear: the demo without rings

I've tried everything and read every post I could find, but nothing solved this problem. All useless html elements in the demo aren't useless in my real animation.

相关阅读:
Top