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' ); } ); });

在线演示        积分下载        6毛下载        砍两刀下载