Results 1 to 4 of 4

Thread: Backface of rotating div showing up before rotation completes

  1. #1
    Join Date
    May 2014
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default 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

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Hmm, which browser is the problem in? Things look OK for me here in Chrome.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    Neil1 (04-16-2015)

  4. #3
    Join Date
    May 2014
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #4
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    488
    Thanks
    0
    Thanked 62 Times in 58 Posts

    Default

    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!

Similar Threads

  1. Gap problem with IE after rotation
    By downtown in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-01-2011, 09:50 AM
  2. CSS rotation not working in IE
    By cmr42 in forum CSS
    Replies: 3
    Last Post: 03-23-2010, 02:37 PM
  3. Image Rotation
    By TimFA in forum Flash
    Replies: 0
    Last Post: 09-27-2007, 08:34 PM
  4. image rotation
    By danishadeel in forum JavaScript
    Replies: 1
    Last Post: 09-04-2007, 06:30 AM
  5. Rotation
    By Mehok in forum Flash
    Replies: 2
    Last Post: 11-28-2006, 01:08 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •