css实现挂上画的360度三维vr房间交互效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：css实现挂上画的360度三维vr房间交互效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
   
<style>
img {
        width:100%;
        position:static
}
.pointer {
        cursor:pointer
}
input {
        display:none
}
html {
        font-size:.5vw;
        width:100%;
        height:100%;
        font-family:"Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif
}
body {
        perspective:50rem;
        overflow:hidden;
        width:100%;
        height:100%;
        margin:0;
        background:#000;
        display:flex;
        flex-wrap:wrap
}
body *,body *:before,body *:after {
        transform-style:preserve-3d;
        box-sizing:border-box;
        position:absolute;
        content:"";
        left:0;
        top:0;
        outline:0
}
#wall4:checked ~ label:not([for=lightswitch]) {
        width:calc(100% / 13);
        height:calc(100% / 3);
        position:relative;
        z-index:1;
        border:0;
        background:0;
        padding:0;
        margin:0;
        display:inline
}
#wall4:checked ~ label:not([for=lightswitch]) label,#wall4:checked ~ label:not([for=lightswitch]) a {
        display:block;
        width:100%;
        height:100%;
        transition:.1s .5s linear
}
#wall4:checked ~ label:nth-of-type(1):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(1):focus ~ z>x>y {
        transform:rotateY(-240deg)
}
#wall4:checked ~ label:nth-of-type(1):hover ~ z>x,#wall4:checked ~ label:nth-of-type(1):focus ~ z>x {
        transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(2):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(2):focus ~ z>x>y {
        transform:rotateY(-230deg)
}
#wall4:checked ~ label:nth-of-type(2):hover ~ z>x,#wall4:checked ~ label:nth-of-type(2):focus ~ z>x {
        transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(3):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(3):focus ~ z>x>y {
        transform:rotateY(-220deg)
}
#wall4:checked ~ label:nth-of-type(3):hover ~ z>x,#wall4:checked ~ label:nth-of-type(3):focus ~ z>x {
        transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(4):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(4):focus ~ z>x>y {
        transform:rotateY(-210deg)
}
#wall4:checked ~ label:nth-of-type(4):hover ~ z>x,#wall4:checked ~ label:nth-of-type(4):focus ~ z>x {
        transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(5):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(5):focus ~ z>x>y {
        transform:rotateY(-200deg)
}
#wall4:checked ~ label:nth-of-type(5):hover ~ z>x,#wall4:checked ~ label:nth-of-type(5):focus ~ z>x {
        transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(6):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(6):focus ~ z>x>y {
        transform:rotateY(-190deg)
}
#wall4:checked ~ label:nth-of-type(6):hover ~ z>x,#wall4:checked ~ label:nth-of-type(6):focus ~ z>x {
        transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(7):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(7):focus ~ z>x>y {
        transform:rotateY(-180deg)
}
#wall4:checked ~ label:nth-of-type(7):hover ~ z>x,#wall4:checked ~ label:nth-of-type(7):focus ~ z>x {
        transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(8):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(8):focus ~ z>x>y {
        transform:rotateY(-170deg)
}
#wall4:checked ~ label:nth-of-type(8):hover ~ z>x,#wall4:checked ~ label:nth-of-type(8):focus ~ z>x {
        transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(9):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(9):focus ~ z>x>y {
        transform:rotateY(-160deg)
}
#wall4:checked ~ label:nth-of-type(9):hover ~ z>x,#wall4:checked ~ label:nth-of-type(9):focus ~ z>x {
        transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(10):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(10):focus ~ z>x>y {
        transform:rotateY(-150deg)
}
#wall4:checked ~ label:nth-of-type(10):hover ~ z>x,#wall4:checked ~ label:nth-of-type(10):focus ~ z>x {
        transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(11):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(11):focus ~ z>x>y {
        transform:rotateY(-140deg)
}
#wall4:checked ~ label:nth-of-type(11):hover ~ z>x,#wall4:checked ~ label:nth-of-type(11):focus ~ z>x {
        transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(12):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(12):focus ~ z>x>y {
        transform:rotateY(-130deg)
}
#wall4:checked ~ label:nth-of-type(12):hover ~ z>x,#wall4:checked ~ label:nth-of-type(12):focus ~ z>x {
        transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(13):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(13):focus ~ z>x>y {
        transform:rotateY(-120deg)
}
#wall4:checked ~ label:nth-of-type(13):hover ~ z>x,#wall4:checked ~ label:nth-of-type(13):focus ~ z>x {
        transform:rotateX(10deg)
}
#wall4:checked ~ label:nth-of-type(14):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(14):focus ~ z>x>y {
        transform:rotateY(-240deg)
}
#wall4:checked ~ label:nth-of-type(15):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(15):focus ~ z>x>y {
        transform:rotateY(-230deg)
}
#wall4:checked ~ label:nth-of-type(16):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(16):focus ~ z>x>y {
        transform:rotateY(-220deg)
}
#wall4:checked ~ label:nth-of-type(17):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(17):focus ~ z>x>y {
        transform:rotateY(-210deg)
}
#wall4:checked ~ label:nth-of-type(18):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(18):focus ~ z>x>y {
        transform:rotateY(-200deg)
}
#wall4:checked ~ label:nth-of-type(19):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(19):focus ~ z>x>y {
        transform:rotateY(-190deg)
}
#wall4:checked ~ label:nth-of-type(20):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(20):focus ~ z>x>y {
        transform:rotateY(-180deg)
}
#wall4:checked ~ label:nth-of-type(21):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(21):focus ~ z>x>y {
        transform:rotateY(-170deg)
}
#wall4:checked ~ label:nth-of-type(22):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(22):focus ~ z>x>y {
        transform:rotateY(-160deg)
}
#wall4:checked ~ label:nth-of-type(23):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(23):focus ~ z>x>y {
        transform:rotateY(-150deg)
}
#wall4:checked ~ label:nth-of-type(24):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(24):focus ~ z>x>y {
        transform:rotateY(-140deg)
}
#wall4:checked ~ label:nth-of-type(25):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(25):focus ~ z>x>y {
        transform:rotateY(-130deg)
}
#wall4:checked ~ label:nth-of-type(26):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(26):focus ~ z>x>y {
        transform:rotateY(-120deg)
}
#wall4:checked ~ label:nth-of-type(27):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(27):focus ~ z>x>y {
        transform:rotateY(-240deg)
}
#wall4:checked ~ label:nth-of-type(27):hover ~ z>x,#wall4:checked ~ label:nth-of-type(27):focus ~ z>x {
        transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(28):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(28):focus ~ z>x>y {
        transform:rotateY(-230deg)
}
#wall4:checked ~ label:nth-of-type(28):hover ~ z>x,#wall4:checked ~ label:nth-of-type(28):focus ~ z>x {
        transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(29):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(29):focus ~ z>x>y {
        transform:rotateY(-220deg)
}
#wall4:checked ~ label:nth-of-type(29):hover ~ z>x,#wall4:checked ~ label:nth-of-type(29):focus ~ z>x {
        transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(30):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(30):focus ~ z>x>y {
        transform:rotateY(-210deg)
}
#wall4:checked ~ label:nth-of-type(30):hover ~ z>x,#wall4:checked ~ label:nth-of-type(30):focus ~ z>x {
        transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(31):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(31):focus ~ z>x>y {
        transform:rotateY(-200deg)
}
#wall4:checked ~ label:nth-of-type(31):hover ~ z>x,#wall4:checked ~ label:nth-of-type(31):focus ~ z>x {
        transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(32):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(32):focus ~ z>x>y {
        transform:rotateY(-190deg)
}
#wall4:checked ~ label:nth-of-type(32):hover ~ z>x,#wall4:checked ~ label:nth-of-type(32):focus ~ z>x {
        transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(33):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(33):focus ~ z>x>y {
        transform:rotateY(-180deg)
}
#wall4:checked ~ label:nth-of-type(33):hover ~ z>x,#wall4:checked ~ label:nth-of-type(33):focus ~ z>x {
        transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(34):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(34):focus ~ z>x>y {
        transform:rotateY(-170deg)
}
#wall4:checked ~ label:nth-of-type(34):hover ~ z>x,#wall4:checked ~ label:nth-of-type(34):focus ~ z>x {
        transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(35):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(35):focus ~ z>x>y {
        transform:rotateY(-160deg)
}
#wall4:checked ~ label:nth-of-type(35):hover ~ z>x,#wall4:checked ~ label:nth-of-type(35):focus ~ z>x {
        transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(36):hover ~ z>x>y,#wall4:checked ~ label:nth-of-type(36):focus ~ z>x>y {
        transform:rotateY(-150deg)
}
#wall4:checked ~ label:nth-of-type(36):hover ~ z>x,#wall4:checked ~ label:nth-of-type(36):focus ~ z>x {
        transform:rotateX(-10deg)
}
#wall4:checked ~ label:nth-of-type(37):hover ~ z>x>y,#wall4:checked ~ label.........完整代码请登录后点击上方下载按钮下载查看