3d风格展示图片

动画

每个产品形象会跳跃动画与无限循环。使它更有吸引力我们为每秒钟图像添加延迟左和右。我们将创建一个关键帧 bouncing-left和 bouncing-right并将它们添加在产品形象和定位。
.left img:nth-child(1) {   
  left: 4em;   
  top: 8em;   
  animation: bouncing-left 2s ease-in-out infinite alternate both;  
}  
    
.left img:nth-child(2) {   
  left: -2em;   
  top: 12em;   
  animation: bouncing-left 2s ease-in-out infinite alternate both;  
  animation-delay: .5s;  
}  
    
.rightright img:nth-child(1) {   
  rightright: 4em;   
  top: 8em;   
  animation: bouncing-rightright 2s ease-in-out infinite alternate both;  
}  
    
.rightright img:nth-child(2) {   
  rightright: -2em;   
  top: 12em;   
  animation: bouncing-rightright 2s ease-in-out infinite alternate both;  
  animation-delay: .5s;  
}  
  
@keyframes bouncing-left {  
  0% { transform: translateY(-10px) rotate3d(0,1,0,-35deg); }  
  100% { transform: translateY(10px) rotate3d(0,1,0,-35deg); }  
}     
  
@keyframes bouncing-rightright {  
  0% { transform: translateY(-10px) rotate3d(0,1,0,35deg); }  
  100% { transform: translateY(10px) rotate3d(0,1,0,35deg); }  
}    

我们还添加旋转的动画 wrapper-item旋转,旋转将开始从0度到35度然后旋转-35度,回到0度。这个动画只会移动3次,延迟3秒开始。
.wrapper-item {  
  position: relative;  
  margin: 0 auto;  
  width: 1000px;  
  height: 400px;  
  margin-bottom: 3em;  
  transform-style: preserve-3d;    
  transition: .5s ease-in-out;  
  animation: rotating 10s ease-in-out 3 alternate both;  
  animation-delay: 3s;  
}  
  
@keyframes rotating {  
  0% { transform: rotate3d(0,1,0,0deg); }  
  30% { transform: rotate3d(0,1,0,35deg); }   
  60% { transform: rotate3d(0,1,0,-35deg); }   
  100% { transform: rotate3d(0,1,0,0deg); }  
}  
JS
$(document).ready(function() {  
    
  //Show only first wrapper  
  $( '.wrapper-item:not(:first-child)' ).hide();  
    
  //Navigation on click  
  $( '.nav' ).on( 'click' , function() {  
      
    this_index = parseInt($(this).index()) + 1;  
      
    $( '.nav' ).removeClass( 'selected' ).end().find( this ).addClass( 'selected' );  
  
    $( '.wrapper-item' ).hide();  
    $( '.wrapper-item:nth-child(' + this_index + ')' ).fadeIn( 'fast' );  
      
  } );  
});