Backface of rotating div showing up before rotation completes

[Neil1]

I have a rotating <div> as part of my header, the CSS for which is as follows:


.logo {
position:absolute;
display:inline-block;
top: 20px;
left: 30px;
z-index: 5;
backface-visibility: hidden;
width: 178px;
height: 178px;
background-image:url("front.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
border: 2px solid rgba(245,245,245,1);
-webkit-border-radius: 99px;
-moz-border-radius: 99px;
border-radius: 99px;
perspective: 1000px;

-webkit-animation-name: spin;
-webkit-animation-duration: 3000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;

-moz-animation-name: spin;
-moz-animation-duration: 3000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;

-ms-animation-name: spin;
-ms-animation-duration: 3000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;

animation-name: spin;
animation-duration: 3000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@-ms-keyframes spin {
from {
-ms-transform: rotateY(0deg);
-ms-transform-style: preserve-3d;
}
to {
-ms-transform: rotateY(360deg);
-ms-transform-style: preserve-3d;
}
}

@-moz-keyframes spin {
from {
-moz-transform: rotateY(0deg);
-moz-transform-style: preserve-3d;
}
to {
-moz-transform: rotateY(360deg);
-moz-transform-style: preserve-3d;
}
}

@-webkit-keyframes spin {
from {
-webkit-transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
}
to {
-webkit-transform: rotateY(360deg);
-webkit-transform-style: preserve-3d;
}
}

@keyframes spin {
from {
transform:rotateY(0deg);
transform-style: preserve-3d;
}
to {
transform:rotateY(360deg);
transform-style: preserve-3d;
}
}

.logoback{
position:absolute;
display:inline-block;
top: 20px;
left: 30px;
z-index: 3;
backface-visibility: visible;
width: 178px;
height: 178px;
background-image:url("back.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
border: 2px solid rgba(245,245,245,1);
-webkit-border-radius: 99px;
-moz-border-radius: 99px;
border-radius: 99px;
perspective: 1000px;

-webkit-animation-name: spin;
-webkit-animation-duration: 3000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;

-moz-animation-name: spin;
-moz-animation-duration: 3000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;

-ms-animation-name: spin;
-ms-animation-duration: 3000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;

animation-name: spin;
animation-duration: 3000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@-ms-keyframes spin {
from {
-ms-transform: rotateY(0deg);
-ms-transform-style: preserve-3d;
}
to {
-ms-transform: rotateY(360deg);
-ms-transform-style: preserve-3d;
}
}

@-moz-keyframes spin {
from {
-moz-transform: rotateY(0deg);
-moz-transform-style: preserve-3d;
}
to {
-moz-transform: rotateY(360deg);
-moz-transform-style: preserve-3d;
}
}

@-webkit-keyframes spin {
from {
-webkit-transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
}
to {
-webkit-transform: rotateY(360deg);
-webkit-transform-style: preserve-3d;
}
}

@keyframes spin {
from {
transform:rotateY(0deg);
transform-style: preserve-3d;
}
to {
transform:rotateY(360deg);
transform-style: preserve-3d;
}
}

The result is close to working, however just before the rotation completes the image switches so the last little bit of the front rotation shows the back image and vice-verse... Anyone got any ideas what I've done wrong?

I have uploaded the problematic element here: http://www.pleasted.co.uk/

And the relevant stylesheet here: view-source:http://www.pleasted.co.uk/header.css

[Beverleyh]

Hmm, which browser is the problem in? Things look OK for me here in Chrome.

[Neil1]

Hmm, it was Chrome that was giving me the problem :/ Was at work when I posted and only have chrome there, but home now and tried in Firefox and that is fine. I have since got round it by making the .logo element empty, deleting .logoback altogether and using .logo:before and .logo:after pseudo-elements to house the images, and that seems to be fine. But thoroughly baffled as to what was going wrong

[styxlawyer]

I've just looked at it in Opera (28.0), Chrome (41.0.2272.118 m) and Firefox. Both Opera and Chrome display the problem but Firefox is fine. I've no idea how to find the version number of Firefox, it's well hidden!