CSS3简易切割轮播图的实现代码jQuery css3实现响应式图文卡片滚动轮播特效CSS3制作轮播图的一种方法利用 CSS3 实现的无缝轮播功能代码CSS3实现列表无限滚动/轮播效果

 btn1.onclick = ()=>{ item++; let r = item * 90; letf.style.transform = 'rotateX(' + r + 'deg)'; letf.style.transition = 'all 1s'; right.style.transform = 'rotateX(' + r + 'deg)'; right.style.transition = 'all 1s .3s'; } btn2.onclick = ()=>{ item--; let r = item * 90; letf.style.transform = 'rotateX(' + r + 'deg)'; letf.style.transition = 'all 1s'; right.style.transform = 'rotateX(' + r + 'deg)'; right.style.transition = 'all 1s .3s'; } 

上一页下一页

 *{ margin: 0; padding: 0; } body{ perspective: 800px; } .box{ display: flex; width: 600px; height: 350px; margin: 150px auto; } .box:hover ul li:nth-child(1){ transition: all 5s; transform: rotateX(360deg); } ul{ flex: 1; list-style: none; padding: 0; margin: 0; transform-style: preserve-3d; /* 开启浏览器的3D显示 */ position: relative; } li{ width: 100%; height: 100%; position: absolute; } li:nth-child(1){ background: url('../images/9.jpg') no-repeat; background-size: 200% 100%; transform: translateZ(175px); } li:nth-child(2){ background: url('../images/10.jpg') no-repeat; background-size: 200% 100%; transform: rotateX(90deg) translateZ(175px); } li:nth-child(3){ background: url('../images/11.jpg') no-repeat; background-size: 200% 100%; transform: rotateX(180deg) translateZ(175px); } li:nth-child(4){ background: url('../images/12.jpg') no-repeat; background-size: 200% 100%; transform: rotateX(-90deg) translateZ(175px); } .right li{ background-position-x: -300px; } 

 let item = 0; let btn1 = document.getElementById('btn1'); let btn2 = document.getElementById('btn2'); let letf = document.querySelector('.letf'); let right = document.querySelector('.right') btn1.onclick = ()=>{ item++; let r = item * 90; letf.style.transform = 'rotateX(' + r + 'deg)'; letf.style.transition = 'all 1s'; right.style.transform = 'rotateX(' + r + 'deg)'; right.style.transition = 'all 1s .3s'; } btn2.onclick = ()=>{ item--; let r = item * 90; letf.style.transform = 'rotateX(' + r + 'deg)'; letf.style.transition = 'all 1s'; right.style.transform = 'rotateX(' + r + 'deg)'; right.style.transition = 'all 1s .3s'; }