<div class="root">  <input type="radio" name="vista" id="left">
    <input type="radio" name="vista" id="center" checked>
    <input type="radio" name="vista" id="right">   
    <input type="radio" name="vista" id="box">   
  <input type="radio"  name="vista" id="door">
    <input type="checkbox" id="luz">
    <input type="checkbox" id="cuadro">
    <input type="checkbox" id="hammer">
    <input type="checkbox" id="pass_1">
    <input type="checkbox" id="pass_2">
    <input type="checkbox" id="pass_3">
    <input type="checkbox" id="pass_4">
    <input type="checkbox" id="pass_5">
    <input type="checkbox" id="box_open">
  <input type="checkbox" id="key">

  <input type="checkbox" id="cerradura">
<div class="screen">
            <input type="text"   class="icon hammer" autocomplete="off">
              <input type="text"   class="icon key" autocomplete="off">
        <div class="room">
            <div class="pared_left">
             <label class="box" for="box">
                        <div class="box_door">
                            <label class="pass_1" for="pass_1"></label>
                            <label class="pass_2" for="pass_2"></label>
                            <label class="pass_3" for="pass_3"></label>
                            <label class="pass_4" for="pass_4"></label>
                            <label class="pass_5" for="pass_5"></label>
                            <label class="box_open" for="box_open"></label>
                        </div>
                        <label class="key" for="key"></label>
                    </label>
             <label class="left" for="left"> </label>
                            <label class="luz" for="luz"></label> 
            </div>
            <div class="pared_front">
              <label class="center" for="center"></label>

               <label class="hammer" for="hammer"></label>
              <label class="door" for="door"> 
                <label class="cerradura" for="cerradura"></label>
              </label>
            </div>
            <div class="pared_right">
              <label class="right" for="right"></label>
                            <label class="cuadro" for="cuadro"> </label>
          </div>
            <div class="floor"></div>
        </div>
    </div>
</div>
.root>input{
  display:none
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}
* {
	box-sizing: border-box;
  transform-style: preserve-3d;
}
.screen div,.room label {
	position: absolute;
	display: block;
	transform-origin: 50% 50%;
}
.screen div{
  pointer-events:none;
}
label{
  pointer-events:all;
  width: 100%;
  height: 100%;
  z-index:+1
}
label:hover {
	cursor: pointer;
}
.screen {
  font-family:sans-serif;
	font-size:0.18vw;
	width: 500em;
	box-shadow: 0 0 10em #aaa;
	height: 250em;
	margin:  auto;
	border: solid 4px #000;
	overflow: hidden;
	perspective-origin: center;
	perspective: 370em;
	background: #cd4640;
  
}
.room {
	width: 600em;
	position: absolute;
	left: 0;
  top:0;
	height: 400em;
	transition: transform ease-in-out 0.3s;
	transform-style: preserve-3d;
	transform: translatex(-50em) translatez(-150em) ;

}
:before,:after {
  box-sizing: border-box;
	width: 100%;
	height: 100%;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
}
.floor {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///8AAABVwtN+AAAAAnRSTlMAIqPzjNwAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDMvMTAvMTlykl2oAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAAxJREFUCJljaGBwAAABxADBzXsYoAAAAABJRU5ErkJggg==');
	width: 600em;
	height: 400em;
	background-size: 20% auto;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	background-color: #e66761;
	transform: rotatex(90deg) translatez(-100em);
}
.pared_left,.pared_right,.pared_front {
	background: linear-gradient(to bottom, #e66761 0%, #a66761 100%);
	border: solid 4em #fdd5d5;
	width: 400em;
	height: 400em;
}
.pared_left {
	transform: rotatey(90deg) translatez(-200em) translatey(-100em);
}
.pared_right {
	transform: rotatey(-90deg) translatez(-400em) translatey(-100em);
}
.pared_front {
	z-index: 8;
	width: 600em;
	height: 400em;
	transform: translatez(-200em) translatey(-100em);
}
.door {
	background: #e1e1e1;
	width: 200em;
	left: 200em;
	border: solid 12em #fff;
	border-bottom: 0;
	height: 350em;
	bottom: 0;
	box-shadow: 0 0 90px rgba(0, 0, 0, 0.2);

}
.door:before {
	content: "";
	width: 80em;
	height: 40em;
  background:#000;
	left: 50em;
	top: 60em;
	border: solid 10em #bbb;
}
.cerradura {
	width: 30em;
	height: 30em;
	background: #fff;
	border-radius: 30em;
	right: 10em;
	top: 150em;
}
.cerradura:after,.cerradura:before {
	content: "";
	background: #000;
}
.cerradura:before {
	width: 6em;
	height: 20em;
	left: 12em;
	top: 7em;
}
.cerradura:after {
	width: 15em;
	height: 15em;
	border-radius: 15em;
	left: 8em;
	top: 5em
}
.luz {
    width: 31em;
    height: 37em;
    background: #fff;
    border: 1em solid #bbb;
    top: 130em;
    left: 50em;
    border-radius: 6em;
}
.luz:before {
    content: "";
    width: 23em;
    height: 29em;
    left: 3em;
    border-radius: 4em;
    border: solid 2em #bbb;
    top: 3em;
    background: linear-gradient(to top, #ffffff 40%, #cedbe5 60%);
}
.cuadro {
    transition: all linear 0.3s;
    width: 100em;
    height: 100em;
    left:80em;
    top:70em;
    box-shadow:0 0 80em rgba(0,0,0,0.4);
}

.cuadro:before {
    box-sizing:border-box;
    content:"" ;
    transition: all linear 0.3s;
    position: absolute;
    width: 100em;
    height: 100em;
    background: linear-gradient(to top, #ffffff 0%, #cedbe5 100%);
    border: 10em solid #bbb;
    box-shadow: 0 0 10em rgba(0,0,0,0.6);
    transform:translatez(2em)
}
.hammer {
    left:40em;
    filter: drop-shadow(0 0 5em rgba(0,0,0,0.3));
    background-size: 100% auto;
    top: 100em;
    height: 100em;
    background-size: 100% auto;
    width: 60em;
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAACPBAMAAACWvOEeAAAAA3NCSVQICAjb4U/gAAAAMFBMVEX///////////////////////////////////////////////////////////////9Or7hAAAAAEHRSTlMAESIzRFVmd4iZqrvM3e7/dpUBFQAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwMy8xNC8xOf3wyv8AAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAABgklEQVRYhWNgGAUkAiElJQVMURMXTDGts3fvXgOzOM8ggXvvjgugqWR8/////39gY/3/o4IXaGrZwKIbYJpQwFVUpdxgwZ9AljS6yv//F6Io1YUIHmZgOY+p9G8AslI7qOhJLCr///+F7FxbbCoQ4AoWU3GBBuKV/lYgWilSiBFU+n8C8UrhTsCp9N99GOspIaWFwtWwmC5EUXrdJQdV5ROgnOgcCPsLRCkPxD3AWKlHsd4ALGtxDqYNCDjAMqCUxYqs9CvUfUzZ7+FKmUASf8HMfiSlBfDQFJkLcwBDLNwx3O+AAKLyF3KKMpsMYykbG0McxiAIBEpAoOziyDCcAKMgBBChdN47CAggrHQ/NAISiFdKgqmjSkeVDqVEWEATpbQJgYaBVkqbwBpVOqp0wJUmDC+l50eVjiod3kqJqGOHktL7o0pHlY4qHVVKC6Xw4T/qOmA/VKkCYaXzISr/oo9mYgGyEKVfCKtkYJoLGvS45UCEUgYm17S0ZAViVI4C3AAApA5FOcnrtMIAAAAASUVORK5CYII=');
    background-position:top center;
  background-repeat:no-repeat;
}
.key {

  	      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAADX0lEQVR4nO2aW4hNURjH/8uYwSCK5PLg0og08TRoEObVAxGFEYnyKJJHkheFlCdJnpRrzINcEp7kUqSkKMYlJlJqMmOMc/w87LOnMe2zz9pnz95rjrN/tV/O+fa3vt+31zlr36SMjIxqxrguoBjAdElrJC2WNKWw1UrqKGwvJLUZY545KzIJgHXAE+xpB/YCI1zXHgugCXgYQXwg74ANrj3KAtgG/Ioh35/jQI1rJ2uAw4Mk3p/rQJ1rt5IAOxKQ9znj2i8UYAnQm2ADAHaXqsPJMggMk/RM0vyEh+qW1GCM6SgWMCzhAorRquTlJale0sGwAFcz4LWk2ZbhXZLa5M2YXklz5Z0gTbHcPydpujHmc9Q6EwFYEOE3fA+YEZBjLHA6Qp5dDlSDAQ5YFn0TCJ2hwCHLXDfS8isJcMei4O/ANItctcBTi3w/iuVw8Sc41SLmnDHmU6kgY8xvSccs8o0GxgV94aIBky1iHkfI98gyLrDxLhowxiKmO0K+Hsu4+qAPXTSg0yKmIUK+WZZxgcugiwZ8tIhZj3e2aMMmi5i8pC+W+ZIFOGu5dO2xyLUMyFvkepmGmxXAGssG/AQ2huRZBHywzHUkTcdQ8Nbur5aFA1zGu3KsB+qARuAokIuQo9m19z8AJyIUH5fnhJxRpv4nCNRKmpnikPuNMaQ4XnHwpv/VFI/+LdfOfTiQfwtMdO0tyYl8J9Do2luSE/n3QBp3m0rjQP4+MMm1t6Q++WsRBXJEeyzm8wpY59q5jxjymwv7z8Z7YPImJL4DOAWsAoaXW+ug3xTFW+cvSVodYbe8pK3GmHMB+SZImiNpvCTkXdV9lvRtyKzvPnGPfEVTpnw+k690CvJtZci3uq49Npl8efJbXNcem2qXrytDHuABlfTqShAx5H3OV2wTBkHe50LFNWEQ5fs3oezz91RJQN7n4pBvQoLy/Zvg6jWd0gBXEpT32e7SsWj3gZ2S1qZQQ1MKYxQlbPrtS6mGuymNYw8wBviTwvQ/6do1EKAG6KpKeR/gdgmBPND9X8pLEjAP6CkikANageVEnylDX96nIDjwzmw70DIgxrYJlSPvA4wEmoGtwFJgVEDMCosmVJ58FICVIU34v+V9gJaAJlSHvA+wEO8Z3UssXnTKyMjIcMlfOgwrP1DTWc8AAAAASUVORK5CYII=');

      width: 40em;
      height: 40em;
      left: 40em;
      filter: drop-shadow(0 0 5em rgba(0,0,0,0.3));
      top: 20em;
      background-repeat: no-repeat;
      border: none;
      background-color: transparent;
      background-size: 100% auto;
}
.icon{
    background-color: #aa0000;
    border-radius: 50em;
    background-size: 70%;
    border: none;
    background-position: center;
    width: 4em;
    height:4em;
    position: absolute;
    left: 1em;
    top: 1em;
    transition: transform 0.5s ease-in-out;
    z-index:9;
    box-shadow: 0 0 20px #000;
    transform: translatey(-7em);
  border:solid 5px #000;
}
.icon:focus{
  border-color: #fff;
}
.hammer.icon{
  background-position:50% -80%;
}
.key.icon{
left:100px;
}
.box .key{
  pointer-events:none
}
.box {
    background: #aa0000;
    box-shadow: 0 0 80px inset;
    left:180em;
    top:170em;
    width: 130em;
    height: 90em;
    border: solid 5em #ddd;
    overflow: hidden;
    z-index:9;
}
.box_door {
  pointer-events:all;
  display:block;
    width: 100%;
    height: 100%;
    background: #ddd;
    padding: 5em;
    box-shadow: 0 0 10px #bbb inset;
    transition: transform 1s linear;
    z-index:9;
}

label[class*="pass"] {
    background: #ccc;
    width: 30em;
    height: 50em;
    margin: 2em;
    position: relative;
    display:inline-block;
    width: 15em;
    height: 35em;
    border-radius: 20em;
    overflow: hidden;
    box-shadow: 0 0 30px #666 inset;
}
label[class*="pass"]:before {
    content: "";
    height: 13em;
    width: 13em;
    color: #000;
    background: #000;
    border-radius: 30em;
    left: 1em;
    top: 1em;
    box-shadow: 0 0 30px #000;
  transition: top 0.3s ease;
}

label[class*="pass"]:after {
    content: "1 0";
    width: 1.2em;
    margin-left: 0;
    text-align: center;
    color: #fff;
    left: 0.25em;
    margin-top: -0.3em;
    font-weight: bold;
    font-size: 9em;
    line-height: 2.3em;
    background: none;
    z-index: 999999;
}
#pass_1:checked~.screen .pass_1:before,
#pass_2:checked~.screen .pass_2:before,
#pass_3:checked~.screen .pass_3:before,
#pass_4:checked~.screen .pass_4:before,
#pass_5:checked~.screen .pass_5:before {
    top:21em;
}
.box_open {
    width: 20em;
    height: 20em;
    right: 5em;
    bottom: 5em;
    background-color: #333;
    border-radius: 30em;
    background-size: auto 80%;
  background-repeat:no-repeat;
  background-position:center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='71' height='71' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='arcs'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E");
}
/*----  interacción  ---*/
#left:not(:checked) ~.screen .box,
#center:not(:checked) ~.screen .door,
#door:not(:checked) ~.screen .door label,
#box:not(:checked) ~.screen .box label{
  pointer-events:none;
}
#right:checked ~.screen .room {
    transform:   translatex(-50em)  rotatey(45deg);
}
#left:checked ~.screen .room {
    transform: translatex(-50em)  rotatey(-45deg) ;
}
#box:checked ~.screen .room {
    transform: translatex(-100em) translatez(500em) rotatey(-90deg) ;
}
#door:checked ~.screen .room {
    transform: translatex(-60em) translatez(300em)  translatey(50em) ;
}
#luz:checked~.screen .luz:before {
    background: linear-gradient(to bottom, #ffffff 40%, #cedbe5 60%);
}
#luz:checked~.screen:after {
    content: "";
    background: rgba(0, 0, 0, 0.6);
}
#cuadro:checked~.screen .cuadro:before {
    transform:  rotatex(90deg) translatey(120em)  translatez(-270em);
}
#cuadro:checked~.screen .cuadro {
     pointer-events: none;
}
#luz:checked ~ #cuadro:checked ~.screen .cuadro:after{
    content:"01101";
    font-size: 40px;
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: center;
}
#key:checked ~.screen .icon.key,
#hammer:checked ~.screen .icon.hammer{
 transform: translatey(0);
}
#key:checked ~.screen .room .key,
#hammer:checked ~.screen .room .hammer {
 display: none;
}

.icon.hammer:focus ~ .room *{
 cursor:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAA3NCSVQICAjb4U/gAAAAMFBMVEX///////////////////////////////////////////////////////////////9Or7hAAAAAEHRSTlMAESIzRFVmd4iZqrvM3e7/dpUBFQAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwMy8xNC8xOf3wyv8AAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAmElEQVQokWNgQAdM6QkMjKEg0K4AFpD+/5WB/d87IPh/TAAkkP//X3L9fwjYDBIAcv5B+f//JUAEEOAX0Jh+ZIH/h8EqVtwHcxaZ7/v/L4DB7v8PBm0Q/zfQCdn3JzCwrmpkYJrZuXLWJJAVqg4YDoUARkFBQRQBqTNnTqAIyAGdgCIg+///T3QBDBWEBahhxm8Bys2gqQAAbWWXSiWsAdoAAAAASUVORK5CYII='),auto;
}
.icon.key:focus ~ .room *:hover {
  cursor:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAB6UlEQVRIS7WUTYiOURiGr/uU/CxkYzsLS02m/KVslJKFjRKxQ/4XQjMb5WepJIlBFmaKWAhlqcnPgoUFWcnWjhQr+encOuN80/HO9833nk/e3fOec677eZ5zn0f850//wF8LrAHmA++BKeBbkzeIwLCkCWBVA/bJ9nHgVvm/VmBE0nNgca/KbR8FLnXWawQk6Q2wok9bf9oezm2jRmCDpCcF/KntvcDnEMKo7ZMzWUsXYownUlwjMCbpXAdiewj4UEBfAatz/ML2+iqBEMIZ26czwLYXAt8LgUfAlhy/tr2ySgDYJel2UcEocD7HyVmpggXTUOlujHFnrcASSR+BecU9PEt3AGwGFhXiW4GHVQIhhMu2j7R4mI9tb6qxqTL8cAv4lO1twJe2Agl+xfahAp58PhZCWG67Myre2b4D3APc9iUn+Ljtgw34DuBBi2qmt/R6B93gv2wn+P228F4CCX7V9oEClHy/Pbeghj+rggS/Znt/kyLpYozxWBW90aIEv257Xy/IICIzdxBCOGv7VL8MbY8Ab/vtm2VTSS+BdXMdlHQzxpgm6F9WnPNMsbhb0g3gR/K5pDRr0sT8YzdpIsNj2+y7uWhpEgC+Asvy/B+SNBlj3ANUwdvMolTBRmByEHgbgZpudN37G/lHvBkAVVCuAAAAAElFTkSuQmCC'),auto;
}
.icon.hammer:not(:focus)  ~ .room .cuadro{
    pointer-events:none;
     animation: example 1s 1;
}
.icon.key:not(:focus)  ~ .room .cerradura{
    pointer-events:none;
     animation: example 1s 1;
}
@keyframes example {
  from {pointer-events:all }
  to {pointer-events:none}
}
#box_open:checked~.screen:before {
    content: "¡ALARMA!";
    font-weight:bold;
    text-shadow: 0 0 0.6em #000;
    z-index: 99999;
    font-size: 60px;
    pointer-events:none;
    text-align: center;
    padding: 70px 0;
    color: #fff;
   display:block;
   pointer-events:all;
   background-color: rgba(255, 0, 0, 0.8);
}
#cerradura:checked ~.screen:before {
    content: "¡HAS ESCAPADO!" !important;
    font-weight:bold;
    text-shadow: 0 0 0.6em #000;
    z-index: 99999;
    font-size: 60px;
    pointer-events:none;
    text-align: center;
    padding: 70px 0;
    color: #fff;
   display:block;
   pointer-events:all;
   background-color: rgba(0, 255, 0, 0.8);
}
#pass_1:checked + #pass_2:not(checked) +#pass_3:not(checked) +#pass_4:checked +#pass_5:not(:checked) ~ #box_open:checked ~ .screen:before {
 content:none;
}
#pass_1:checked + #pass_2:not(checked) +#pass_3:not(checked) +#pass_4:checked +#pass_5:not(:checked) ~ #box_open:checked ~ .screen .box_door{
 transform:translatex(-90%);
}

#pass_1:checked + #pass_2:not(checked) +#pass_3:not(checked) +#pass_4:checked +#pass_5:not(:checked) ~ #box_open:checked ~ .screen .box .key{
  pointer-events:all
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.