纯CSS 3D立方体轮播-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯CSS 交互式3D立方体轮播</title>
<style>
   .photo-cube__control{z-index:2}.photo-cube__control:nth-of-type(1):checked~.photo-cube__indicators .photo-cube__indicator:nth-of-type(1){opacity:1}.photo-cube__control:nth-of-type(2):checked~.photo-cube__indicators .photo-cube__indicator:nth-of-type(2){opacity:1}.photo-cube__control:nth-of-type(3):checked~.photo-cube__indicators .photo-cube__indicator:nth-of-type(3){opacity:1}.photo-cube__control:nth-of-type(4):checked~.photo-cube__indicators .photo-cube__indicator:nth-of-type(4){opacity:1}.photo-cube__control:nth-of-type(5):checked~.photo-cube__indicators .photo-cube__indicator:nth-of-type(5){opacity:1}.photo-cube__control:nth-of-type(6):checked~.photo-cube__indicators .photo-cube__indicator:nth-of-type(6){opacity:1}.photo-cube__control:nth-of-type(1):checked~.photo-cube{transform:rotateX(0deg) rotateY(0deg)}.photo-cube__control:nth-of-type(6):checked~.photo-cube{transform:rotateX(90deg) rotateY(0deg)}.photo-cube__control:nth-of-type(3):checked~.photo-cube{transform:rotateX(180deg) rotateY(0deg)}.photo-cube__control:nth-of-type(5):checked~.photo-cube{transform:rotateX(270deg) rotateY(0deg)}.photo-cube__control:nth-of-type(4):checked~.photo-cube{transform:rotateX(360deg) rotateY(90deg)}.photo-cube__control:nth-of-type(2):checked~.photo-cube{transform:rotateX(360deg) rotateY(-90deg)}.content{height:600px;left:50%;margin-left:-300px;margin-top:-300px;position:absolute;top:50%;transform:scale(.25);transition:all .5s ease 0s;width:600px}.content:hover{transform:scale(1);transition:all .5s ease 0s}.content:hover .photo-cube__wrapper{animation:entrance .5s ease;transform:rotate(0deg);transition:all .5s ease 0s}.content:hover .photo-cube__indicators{opacity:1}.content:hover .photo-cube__control:nth-of-type(1):checked~.photo-cube .photo-cube__panel:nth-of-type(1){opacity:1}.content:hover .photo-cube__control:nth-of-type(1):checked~.photo-cube__actions--right .photo-cube__action:nth-of-type(1),.content:hover .photo-cube__control:nth-of-type(1):checked~.photo-cube__actions--left .photo-cube__action:nth-of-type(1){transition:opacity .5s ease 0s;display:block}.content:hover .photo-cube__control:nth-of-type(1):checked~.photo-cube__actions--right .photo-cube__action:nth-of-type(1):hover,.content:hover .photo-cube__control:nth-of-type(1):checked~.photo-cube__actions--left .photo-cube__action:nth-of-type(1):hover{opacity:1}.content:hover .photo-cube__control:nth-of-type(2):checked~.photo-cube .photo-cube__panel:nth-of-type(2){opacity:1}.content:hover .photo-cube__control:nth-of-type(2):checked~.photo-cube__actions--right .photo-cube__action:nth-of-type(2),.content:hover .photo-cube__control:nth-of-type(2):checked~.photo-cube__actions--left .photo-cube__action:nth-of-type(2){transition:opacity .5s ease 0s;display:block}.content:hover .photo-cube__control:nth-of-type(2):checked~.photo-cube__actions--right .photo-cube__action:nth-of-type(2):hover,.content:hover .photo-cube__control:nth-of-type(2):checked~.photo-cube__actions--left .photo-cube__action:nth-of-type(2):hover{opacity:1}.content:hover .photo-cube__control:nth-of-type(3):checked~.photo-cube .photo-cube__panel:nth-of-type(3){opacity:1}.content:hover .photo-cube__control:nth-of-type(3):checked~.photo-cube__actions--right .photo-cube__action:nth-of-type(3),.content:hover .photo-cube__control:nth-of-type(3):checked~.photo-cube__actions--left .photo-cube__action:nth-of-type(3){transition:opacity .5s ease 0s;display:block}.content:hover .photo-cube__control:nth-of-type(3):checked~.photo-cube__actions--right .photo-cube__action:nth-of-type(3):hover,.content:hover .photo-cube__control:nth-of-type(3):checked~.photo-cube__actions--left .photo-cube__action:nth-of-type(3):hover{opacity:1}.content:hover .photo-cube__control:nth-of-type(4):checked~.photo-cube .photo-cube__panel:nth-of-type(4){opacity:1}.content:hover .photo-cube__control:nth-of-type(4):checked~.photo-cube__actions--right .photo-cube__action:nth-of-type(4),.content:hover .photo-cube__control:nth-of-type(4):checked~.photo-cube__actions--left .photo-cube__action:nth-of-type(4){transition:opacity .5s ease 0s;display:block}.content:hover .photo-cube__control:nth-of-type(4):checked~.photo-cube__actions--right .photo-cube__action:nth-of-type(4):hover,.content:hover .photo-cube__control:nth-of-type(4):checked~.photo-cube__actions--left .photo-cube__action:nth-of-type(4):hover{opacity:1}.content:hover .photo-cube__control:nth-of-type(5):checked~.photo-cube .photo-cube__panel:nth-of-type(5){opacity:1}.content:hover .photo-cube__control:nth-of-type(5):checked~.photo-cube__actions--right .photo-cube__action:nth-of-type(5),.content:hover .photo-cube__control:nth-of-type(5):checked~.photo-cube__actions--left .photo-cube__action:nth-of-type(5){transition:opacity .5s ease 0s;display:block}.content:hover .photo-cube__control:nth-of-type(5):checked~.photo-cube__actions--right .photo-cube__action:nth-of-type(5):hover,.content:hover .photo-cube__control:nth-of-type(5):checked~.photo-cube__actions--left .photo-cube__action:nth-of-type(5):hover{opacity:1}.content:hover .photo-cube__control:nth-of-type(6):checked~.photo-cube .photo-cube__panel:nth-of-type(6){opacity:1}.content:hover .photo-cube__control:nth-of-type(6):checked~.photo-cube__actions--right .photo-cube__action:nth-of-type(6),.content:hover .photo-cube__control:nth-of-type(6):checked~.photo-cube__actions--left .photo-cube__action:nth-of-type(6){transition:opacity .5s ease 0s;display:block}.content:hover .photo-cube__control:nth-of-type(6):checked~.photo-cube__actions--right .photo-cube__action:nth-of-type(6):hover,.content:hover .photo-cube__control:nth-of-type(6):checked~.photo-cube__actions--left .photo-cube__action:nth-of-type(6):hover{opacity:1}.photo-cube__wrapper{animation:axial-spin 10s infinite linear;height:300px;left:50%;margin-left:-150px;margin-top:-150px;position:absolute;top:50%;transform:scale(.25);transform-style:preserve-3d;transition:all .5s ease 0s;width:300px}.photo-cube{height:300px;left:50%;margin-left:-150px;margin-top:-150px;position:absolute;top:50%;transform:rotateX(45deg) rotateY(45deg);transform-style:preserve-3d;transition:all .5s ease 0s;width:300px}.photo-cube__panel{height:100%;left:0;position:absolute;opacity:.45;top:0;transition:all .5s ease 0s;width:100%}.photo-cube__panel:nth-of-type(3){background:#f22613;transform:translateZ(-15.........完整代码请登录后点击上方下载按钮下载查看