纯css实现三维画廊第一人称观看效果
代码语言:html
所属分类:画廊相册
代码描述:纯css实现三维画廊第一人称观看效果
下面为部分代码预览,完整代码请点击下载或在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: 0.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: none; } #wall4:checked ~ label:not([for="lightswitch"]) { width: calc(100% / 13); height: calc(100% / 3); position: relative; z-index: 1; border: none; background: none; 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: 0.1s 0.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:nth-of-type(37):focus ~ z > x > y { transform: rotateY(-140deg); } #wall4:checked ~ label:nth-of-type(37):hover ~ z > x, #wall4:checked ~ label:nth-of-type(37):focus ~ z > x { transform: rotateX(-10deg); } #wall4:checked ~ label:nth-of-type(38):hover ~ z > x > y, #wall4:checked ~ label:nth-of-type(38):focus ~ z > x > y { transform: rotateY(-130deg); } #wall4:checked ~ label:nth-of-type(38):hover ~ z > x, #wall4:checked ~ label:nth-of-type(38):focus ~ z > x { transform: rotateX(-10deg); } #wall4:checked ~ label:nth-of-type(39):hover ~ z > x > y, #wall4:checked ~ label:nth-of-type(39):focus ~ z > x > y { transform: rotateY(-120deg); } #wall4:checked ~ label:nth-of-type(39):hover ~ z > x, #wall4:checked ~ label:nth-of-type(39):focus ~ z > x { transform: rotateX(-10deg); } x, y, z { position: absolute; top: -50rem; left: 0; right: 0; bottom: 0; margin: auto; width: 1rem; height: 1rem; transition: 0.5s ease-in-out; } floor, floor:before, floor:after, ceiling, ceiling:before, ceiling:after { width: 300rem; height: 300rem; box-shadow: 0 0 1rem #110e12; } floor { height: 400rem; transform: rotateX(90deg) translate3d(-150rem, -50rem, 0rem); box-shadow: 0 0 1rem #110e12, inset 0 0 10rem 0 rgba(17, 14, 18, 0.75); background: linear-gradient(#000, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), repeating-linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 12rem, rgba(17, 14, 18, 0.5) 12.5rem), radial-gradient(#d9996b, #361f0e); } floor:before, floor:after { background: radial-gradient(circle at center top, #7f95a8, #110e12); } floor:before { transform: rotateY(90deg) translate3d(-150rem, 100rem, -150rem); } floor:after { transform: rotateY(-90deg) translate3d(150rem, 100rem, -150rem); } ceiling { transform: rotateX(-90deg) translate3d(-150rem, 0, -200rem); box-shadow: 0 0 1rem #7f95a8, inset 0 0 10rem 0 rgba(17, 14, 18, 0.2); background: radial-gradient(#fff, #7f95a8); } ceiling:before { display: none; } ceiling:after { transform: rotateX(90deg) translate3d(0, 150rem, 150rem); background: radial-gradient(circle at center top, #7f95a8, #110e12); } wall1 painting, wall2 painting, wall3 painting { width: 120rem; height: 156rem; border: 2rem solid #d9996b; border-top-color: #221309; border-left-color: #361f0e; border-right-color: #4a2b13; transform: rotateY(-90deg) translate3d(0, -17rem, -89rem); background: #110e12; box-shadow: 0 5rem 2rem -2rem rgba(17, 14, 18, 0.5), inset 0 0 10rem #000; border-radius: 2rem; padding: 1rem; } wall1 painting p, wall2 painting p, wall3 painting p { color: #fff; top: 96%; left: 50rem; font-size: 8rem; transform: translate3d(0, 5rem, 0) scaleY(0); width: 130rem; width: 0; text-shadow: 5rem 5rem 2rem #110e12; transform-origin: -62rem 0; transition: 0.5s ease-in-out; line-height: 1.05em; word-wrap: break-word; } wall1 painting p:before, wall2 painting p:before, wall3 painting p:before { width: 52rem; height: 22rem; border-right: 0.5rem solid #fff; border-top: 0.5rem solid #fff; transform: translate3d(-56rem, 0rem, 0); box-shadow: 2rem 0 1rem -1rem rgba(17, 14, 18, 0.5), inset 0 2rem 1rem -1rem rgba(17, 14, 18, 0.5); } wall1 painting p:after, wall2 painting p:after, wall3 painting p:after { width: 6rem; height: 50rem; border-left: 0.5rem solid #fff; border-right: 0.5rem solid #fff; transform: skewY(45deg) translate3d(-62rem, 9.5rem, 0); box-shadow: 2rem 0 1rem -1rem rgba(17, 14, 18, 0.5), inset 2rem 0 1rem -1rem rgba(17, 14, 18, 0.5); } wall1 painting p *, wall2 painting p *, wall3 painting p * { position: relative; content: normal; } wall2 painting { width: 200rem; height: 126rem; transform: translate3d(-100rem, 0, 148rem) scaleX(-1); } wall3 painting { width: 110rem; height: 144rem; transform: rotateY(90deg) translate3d(0, -17rem, -200rem); } wall4 { transform: translate3d(-150rem, -50rem, -150rem); background: radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0), rgba(17, 14, 18, 0.5)), linear-gradient(to right, rgba(17, 14, 18, 0.5), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(17, 14, 18, 0.5)); box-shadow: 0 0 1rem #110e12; width: 300rem; height: 250rem; } wall4:before, wall4 door { width: 86rem; height: 224rem; border-radius: 1rem; box-shadow: 0 0 0 150rem #7f95a8; left: -10rem; right: -10rem; margin: auto; top: 60rem; transform: translate3d(0, 0, -1rem); } wall4:after { width: 10rem; height: 224rem; background: linear-gradient(#110e12, #9daebd, #637c91); transform: translate3d(183rem, 65rem, -.........完整代码请登录后点击上方下载按钮下载查看
网友评论0