本文为小伙伴们带来了关于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'; }
最后附上全部代码,希望对学习前端的你有所帮助
html代码
css 代码
*{ margin: 0; padding: 0; } body{ perspective: 800px; } .box{ display: flex; 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; }
js代码
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'; }
以上就是关于CSS3切割轮播图的代码展示的全部内容了,感兴趣的小伙伴记得点击关注哦。