纯css实现3D图像轮转效果

2020-04-28 07:19:02易采站长站整理

    transform:transformY(360deg/$numFace*($i – 1));       
    animation: rotateMe#{$i} 10s infinite;       
  }       
  @keyframes rotateMe#{$i} {       
    0% {       
        transform:rotateY(360deg/$numFace*($i – 1));       
    }       
    9% {       
        transform:rotateY(360deg/$numFace*($i – 1));       
    }       
    24% {       
        transform:rotateY(360deg/$numFace*($i));       
    }       
    42% {       
        transform:rotateY(360deg/$numFace*($i));       
    }       
    57% {       
        transform:rotateY(360deg/$numFace*($i + 1));       
    }       
    75% {       
        transform:rotateY(360deg/$numFace*($i + 1));       
    }       
    90% {       
        transform:rotateY(360deg/$numFace*($i + 2));       
    }       
    100% {       
        transform:rotateY(360deg/$numFace*($i + 2));       
    }       
  }       
}      
     
//图像条面的背景偏移     
@for $i from 1 through $numPoster {       
  .poster .p#{$i} {background-position:-($width/$numPoster*($i – 1)) top;}