纯CSS实现的3D迷宫

CSS-Only 3D VR Maze

css3, wall, maze

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1543
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    overflow: hidden;
    perspective: 800px;
    -webkit-perspective: 800px;
    /* for dealing with what is seen above the fold */
    
    margin-top: -20%;
}
.container {
    width: 900px;
    height: 900px;
    transform: rotateX(90deg);
    transform-style: preserve-3d;
}
.board {
    animation: camera 50.4s 2s linear forwards;
    background-color: #c80;
    width: 900px;
    height: 900px;
    transform: translate3d(400px, 400px, -50px) rotateZ(0deg);
    transform-origin: 50px 750px 0;
    transform-style: preserve-3d;
}
.ceiling {
    background-color: #ccc;
    background-image: repeating-linear-gradient(#888888, #888888 1%, transparent 1%, transparent 24%, #888888 24%, #888888 25%);
    background-size: 100px 100px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transform: translateZ(100px);
}
.ceiling .tile-top,
.ceiling .tile-bottom {
    background-size: 100px 50px;
    display: block;
    width: 100%;
    height: 25px;
}
.ceiling .tile-top {
    background-image: repeating-linear-gradient(90deg, transparent, transparent 24%, #888888 24%, #888888 25%, transparent 25%, transparent 74%, #888888 74%, #888888 75%, transparent 75%, transparent);
}
.ceiling .tile-bottom {
    background-image: repeating-linear-gradient(90deg, transparent, transparent 49%, #888888 49%, #888888 50%);
}
.wall {
    animation: raiseWalls 2s 51.6s linear alternate-reverse forwards, raiseWalls 2s linear alternate;
    background-image: repeating-linear-gradient(#fff, #fff 5%, #900 5%, #900 25%, #fff 25%, #fff 29%, transparent 29%, transparent 50%), repeating-linear-gradient(90deg, #900, #900 23%, #fff 23%, #fff 27%, #900 27%, #900 50%);
    background-size: 100px 100px;
    color: #fff;
    position: absolute;
    height: 100px;
    transform-origin: 0 100%;
}
.wall .wall-half {
    background-image: repeating-linear-gradient(90deg, #fff, #fff 3%, transparent 3%, transparent 48%, #fff 48%, #fff 50%);
    background-size: 100px 100px;
    display: block;
    margin-bottom: 25px;
    width: 100%;
    height: 25px;
}
.wall:nth-of-type(1) {
    bottom: 0px;
    left: 0px;
    width: 900px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(2) {
    bottom: 900px;
    left: 0px;
    width: 900px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(3) {
    bottom: 0px;
    left: 0px;
    width: 900px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(4) {
    bottom: 0px;
    left: 900px;
    width: 900px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(5) {
    bottom: 100px;
    left: 300px;
    width: 200px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(6) {
    bottom: 100px;
    left: 600px;
    width: 300px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(7) {
    bottom: 200px;
    left: 300px;
    width: 300px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(8) {
    bottom: 300px;
    left: 100px;
    width: 200px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(9) {
    bottom: 400px;
    left: 100px;
    width: 100px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(10) {
    bottom: 400px;
    left: 400px;
    width: 200px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(11) {
    bottom: 400px;
    left: 700px;
    width: 100px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(12) {
    bottom: 500px;
    left: 0px;
    width: 100px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(13) {
    bottom: 500px;
    left: 300px;
    width: 100px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(14) {
    bottom: 500px;
    left: 600px;
    width: 300px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(15) {
    bottom: 600px;
    left: 200px;
    width: 100px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(16) {
    bottom: 600px;
    left: 400px;
    width: 200px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(17) {
    bottom: 600px;
    left: 700px;
    width: 100px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(18) {
    bottom: 700px;
    left: 100px;
    width: 100px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(19) {
    bottom: 700px;
    left: 300px;
    width: 200px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(20) {
    bottom: 700px;
    left: 700px;
    width: 100px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(21) {
    bottom: 800px;
    left: 100px;
    width: 100px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(22) {
    bottom: 800px;
    left: 300px;
    width: 100px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(23) {
    bottom: 800px;
    left: 500px;
    width: 300px;
    transform: rotateX(-90deg);
}
.wall:nth-of-type(24) {
    bottom: 0px;
    left: 100px;
    width: 100px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(25) {
    bottom: 200px;
    left: 100px;
    width: 300px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(26) {
    bottom: 600px;
    left: 100px;
    width: 200px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(27) {
    bottom: 100px;
    left: 200px;
    width: 200px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(28) {
    bottom: 400px;
    left: 200px;
    width: 200px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(29) {
    bottom: 800px;
    left: 200px;
    width: 100px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(30) {
    bottom: 0px;
    left: 300px;
    width: 100px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(31) {
    bottom: 400px;
    left: 300px;
    width: 200px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(32) {
    bottom: 200px;
    left: 400px;
    width: 200px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(33) {
    bottom: 500px;
    left: 400px;
    width: 100px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(34) {
    bottom: 700px;
    left: 400px;
    width: 100px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(35) {
    bottom: 200px;
    left: 500px;
    width: 100px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(36) {
    bottom: 400px;
    left: 500px;
    width: 400px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(37) {
    bottom: 300px;
    left: 600px;
    width: 100px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(38) {
    bottom: 600px;
    left: 600px;
    width: 100px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(39) {
    bottom: 0px;
    left: 700px;
    width: 200px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(40) {
    bottom: 300px;
    left: 700px;
    width: 200px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(41) {
    bottom: 600px;
    left: 700px;
    width: 100px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(42) {
    bottom: 200px;
    left: 800px;
    width: 200px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.wall:nth-of-type(43) {
    bottom: 500px;
    left: 800px;
    width: 100px;
    transform: rotateX(-90deg) rotateY(90deg);
}
.marker {
    font: 22pt Helvetica;
    position: absolute;
    opacity: 0.8;
    text-align: center;
    transform-style: preserve-3d;
}
.start {
    background: #ccc;
    bottom: 167px;
    left: 10px;
    width: 80px;
    height: 40px;
    line-height: 40px;
    transform: translateZ(50px) rotateX(-90deg);
    animation: startPoint 2s 51.6s linear alternate-reverse forwards, startPoint 2s linear alternate;
}
.finish {
    background: #ff0;
    border-radius: 50%;
    top: 25px;
    left: 167px;
    width: 50px;
    height: 50px;
    font-weight: bold;
    line-height: 45px;
    transform: translateZ(50px) rotateX(-90deg) rotateY(90deg) rotateZ(90deg);
    animation: finPoint 2s 51.6s linear alternate-reverse forwards, finPoint 2s linear alternate;
}
@keyframes raiseWalls {
    from {
        height: 0;
    }
    to {
        height: 100px;
    }
}
@keyframes startPoint {
    from {
        transform: scale3d(1, 0, 0) translateZ(0px) rotateX(-90deg);
    }
    to {
        transform: scale3d(1, 1, 1) translateZ(50px) rotateX(-90deg);
    }
}
@keyframes finPoint {
    from {
        transform: scale3d(1, 0, 0) translateZ(0px) rotateX(-90deg) rotateY(90deg) rotateZ(90deg);
    }
    to {
        transform: scale3d(1, 1, 1) translateZ(50px) rotateX(-90deg) rotateY(90deg) rotateZ(90deg);
    }
}
@keyframes camera {
    0% {
        transform: translate3d(400px, 400px, -50px) rotateZ(0deg);
        transform-origin: 50px 850px 0;
    }
    1.5873% {
        transform: translate3d(400px, 500px, -50px) rotateZ(0deg);
        transform-origin: 50px 750px 0;
    }
    3.1746% {
        transform: translate3d(400px, 500px, -50px) rotateZ(-90deg);
    }
    4.7619% {
        transform: translate3d(400px, 600px, -50px) rotateZ(-90deg);
        transform-origin: 50px 750px 0;
    }
    6.34921% {
        transform: translate3d(300px, 500px, -50px) rotateZ(-180deg);
        transform-origin: 150px 750px 0;
    }
    7.93651% {
        transform: translate3d(300px, 600px, -50px) rotateZ(-180deg);
        transform-origin: 150px 750px 0;
    }
    9.52381% {
        transform: translate3d(300px, 400px, -50px) rotateZ(-90deg);
        transform-origin: 150px 850px 0;
    }
    11.11111% {
        transform: translate3d(200px, 400px, -50px) rotateZ(-90deg);
        transform-origin: 250px 850px 0;
    }
    12.69841% {
        transform: translate3d(200px, 400px, -50px) rotateZ(0deg);
        transform-origin: 250px 850px 0;
    }
    14.28571% {
        transform: translate3d(200px, 500px, -50px) rotateZ(0deg);
        transform-origin: 250px 850px 0;
    }
    15.87302% {
        transform: translate3d(200px, 500px, -50px) rotateZ(-90deg);
        transform-origin: 250px 750px 0;
    }
    17.46032% {
        transform: translate3d(200px, 600px, -50px) rotateZ(-90deg);
        transform-origin: 250px 750px 0;
    }
    19.04762% {
        transform: translate3d(200px, 700px, -50px) rotateZ(-90deg);
        transform-origin: 250px 750px 0;
    }
    20.63492% {
        transform: translate3d(200px, 800px, -50px) rotateZ(-90deg);
        transform-origin: 250px 750px 0;
    }
    22.22222% {
        transform: translate3d(200px, 900px, -50px) rotateZ(-90deg);
        transform-origin: 250px 750px 0;
    }
    23.80952% {
        transform: translate3d(-200px, 500px, -50px) rotateZ(0deg);
        transform-origin: 650px 750px 0;
    }
    25.39683% {
        transform: translate3d(-200px, 600px, -50px) rotateZ(0deg);
        transform-origin: 650px 750px 0;
    }
    26.98413% {
        transform: translate3d(-200px, 700px, -50px) rotateZ(0deg);
        transform-origin: 650px 750px 0;
    }
    28.57143% {
        transform: translate3d(-200px, 800px, -50px) rotateZ(0deg);
        transform-origin: 650px 750px 0;
    }
    30.15873% {
        transform: translate3d(-200px, 800px, -50px) rotateZ(90deg);
        transform-origin: 650px 450px 0;
    }
    31.74603% {
        transform: translate3d(-100px, 800px, -50px) rotateZ(90deg);
        transform-origin: 550px 450px 0;
    }
    33.33333% {
        transform: translate3d(-100px, 800px, -50px) rotateZ(0deg);
        transform-origin: 550px 450px 0;
    }
    34.92063% {
        transform: translate3d(-100px, 900px, -50px) rotateZ(0deg);
        transform-origin: 550px 450px 0;
    }
    36.50794% {
        transform: translate3d(-100px, 900px, -50px) rotateZ(-90deg);
        transform-origin: 550px 350px 0;
    }
    38.09524% {
        transform: translate3d(-100px, 1000px, -50px) rotateZ(-90deg);
        transform-origin: 550px 350px 0;
    }
    39.68254% {
        transform: translate3d(-200px, 900px, -50px) rotateZ(0deg);
        transform-origin: 650px 350px 0;
    }
    41.26984% {
        transform: translate3d(-200px, 1000px, -50px) rotateZ(0deg);
        transform-origin: 650px 350px 0;
    }
    42.85714% {
        transform: translate3d(-200px, 1100px, -50px) rotateZ(0deg);
        transform-origin: 650px 150px 0;
    }
    44.44444% {
        transform: translate3d(-200px, 1100px, -50px) rotateZ(-90deg);
        transform-origin: 650px 150px 0;
    }
    46.03175% {
        transform: translate3d(-200px, 1200px, -50px) rotateZ(-90deg);
        transform-origin: 650px 150px 0;
    }
    47.61905% {
        transform: translate3d(-200px, 1300px, -50px) rotateZ(-90deg);
        transform-origin: 650px 150px 0;
    }
    49.20635% {
        transform: translate3d(-400px, 1100px, -50px) rotateZ(0deg);
        transform-origin: 850px 150px 0;
    }
    50.79365% {
        transform: translate3d(-400px, 1200px, -50px) rotateZ(0deg);
        transform-origin: 850px 150px 0;
    }
    52.38095% {
        transform: translate3d(-400px, 1200px, -50px) rotateZ(90deg);
        transform-origin: 850px 50px 0;
    }
    53.96825% {
        transform: translate3d(-400px, 1300px, -50px) rotateZ(90deg);
        transform-origin: 850px 50px 0;
    }
    55.55556% {
        transform: translate3d(-400px, 1400px, -50px) rotateZ(90deg);
        transform-origin: 850px 50px 0;
    }
    57.14286% {
        transform: translate3d(-400px, 1500px, -50px) rotateZ(90deg);
        transform-origin: 850px 50px 0;
    }
    58.73016% {
        transform: translate3d(-400px, 1600px, -50px) rotateZ(90deg);
        transform-origin: 850px 50px 0;
    }
    60.31746% {
        transform: translate3d(-400px, 1700px, -50px) rotateZ(90deg);
        transform-origin: 850px 50px 0;
    }
    61.90476% {
        transform: translate3d(-400px, 1800px, -50px) rotateZ(90deg);
        transform-origin: 850px 50px 0;
    }
    63.49206% {
        transform: translate3d(200px, 1200px, -50px) rotateZ(180deg);
        transform-origin: 250px 50px 0;
    }
    65.07937% {
        transform: translate3d(200px, 1300px, -50px) rotateZ(180deg);
        transform-origin: 250px 50px 0;
    }
    66.66667% {
        transform: translate3d(200px, 1400px, -50px) rotateZ(180deg);
        transform-origin: 250px 50px 0;
    }
    68.25397% {
        transform: translate3d(200px, 1000px, -50px) rotateZ(270deg);
        transform-origin: 250px 250px 0;
    }
    69.84127% {
        transform: translate3d(200px, 1100px, -50px) rotateZ(270deg);
        transform-origin: 250px 250px 0;
    }
    71.42857% {
        transform: translate3d(200px, 1200px, -50px) rotateZ(270deg);
        transform-origin: 250px 250px 0;
    }
    73.01587% {
        transform: translate3d(0px, 1000px, -50px) rotateZ(90deg);
        transform-origin: 450px 250px 0;
    }
    74.60317% {
        transform: translate3d(0px, 1100px, -50px) rotateZ(90deg);
        transform-origin: 450px 250px 0;
    }
    76.19048% {
        transform: translate3d(0px, 1200px, -50px) rotateZ(90deg);
        transform-origin: 450px 250px 0;
    }
    77.77778% {
        transform: translate3d(0px, 1300px, -50px) rotateZ(90deg);
        transform-origin: 450px 250px 0;
    }
    79.36508% {
        transform: translate3d(300px, 1000px, -50px) rotateZ(180deg);
        transform-origin: 150px 250px 0;
    }
    80.95238% {
        transform: translate3d(300px, 1100px, -50px) rotateZ(180deg);
        transform-origin: 150px 250px 0;
    }
    82.53968% {
        transform: translate3d(300px, 1200px, -50px) rotateZ(180deg);
        transform-origin: 150px 250px 0;
    }
    84.12698% {
        transform: translate3d(300px, 800px, -50px) rotateZ(0deg);
        transform-origin: 150px 450px 0;
    }
    85.71429% {
        transform: translate3d(300px, 900px, -50px) rotateZ(0deg);
        transform-origin: 150px 450px 0;
    }
    87.30159% {
        transform: translate3d(300px, 900px, -50px) rotateZ(90deg);
        transform-origin: 150px 350px 0;
    }
    88.88889% {
        transform: translate3d(300px, 1000px, -50px) rotateZ(90deg);
        transform-origin: 150px 350px 0;
    }
    90.47619% {
        transform: translate3d(400px, 900px, -50px) rotateZ(0deg);
        transform-origin: 50px 350px 0;
    }
    92.06349% {
        transform: translate3d(400px, 1000px, -50px) rotateZ(0deg);
        transform-origin: 50px 350px 0;
    }
    93.65079% {
        transform: translate3d(400px, 1100px, -50px) rotateZ(0deg);
        transform-origin: 50px 350px 0;
    }
    95.2381% {
        transform: translate3d(400px, 1200px, -50px) rotateZ(0deg);
        transform-origin: 50px 50px 0;
    }
    96.8254% {
        transform: translate3d(400px, 1200px, -50px) rotateZ(-90deg);
        transform-origin: 50px 50px 0;
    }
    98.4127% {
        transform: translate3d(400px, 1300px, -50px) rotateZ(-90deg);
        transform-origin: 50px 50px 0;
    }
    100% {
        transform: translate3d(400px, 1300px, -50px) rotateZ(-90deg);
        transform-origin: 50px 50px 0;
    }
}

HTML

CSS-Only 3D VR Maze

css3, wall, maze

编辑器支持Emmet

快捷键

CSS-Only 3D VR Maze

css3, wall, maze

纯CSS实现的3D柱状图

纯CSS实现的3D绿洲游戏场景动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：