Backface of rotating div showing up before rotation completes
I have a rotating <div> as part of my header, the CSS for which is as follows:
Code:
.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
