<input type="radio" name="size" id="left">
    <input type="radio" name="size" id="center" checked>
    <input type="radio" name="size" id="right">    
    <input type="checkbox" id="luz">
    <input type="checkbox" id="cuadro">
    <input type="checkbox" id="hammer">
<div class="screen">
            <input type="text"   class="icon hammer" autocomplete="off">
        <div class="room">
            <div class="pared_left">
              <label class="left" for="left"></label>
            </div>
            <div class="pared_front">
              <label class="center" for="center"></label>
              <label class="luz" for="luz"></label> 
               <label class="hammer" for="hammer"></label>
              <div class="door"> 
                <div class="cerradura"></div>
              </div>
            </div>
            <div class="pared_right">
              <label class="right" for="right"></label>
                            <label class="cuadro" for="cuadro"> </label>
          </div>
            <div class="floor"></div>
        </div>
    </div>

* {
	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-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);
  pointer-events:none;
}
.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: 100em;
    left: 130em;
    border-radius: 6em;
}
.luz:before {
    content: "";
    width: 22em;
    height: 28em;
    left: 10%;
    border-radius: 4em;
    border: solid 1em #fff;
    top: 9%;
    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;
}
.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 #fff;
    transform: translatey(-7em)
}
.hammer.icon{
  background-position:50% -80%
}
/*----  interacción  ---*/
#right:checked ~.screen .room {
    transform:   translatex(-50em)  rotatey(45deg);
}
#left:checked ~.screen .room {

    transform: translatex(-50em) rotatey(-45deg) ;
}
#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;
}
#hammer:checked ~.screen .icon.hammer{
 transform: translatey(0);
}
#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.hammer:not(:focus)  ~ .room .cuadro{
    pointer-events:none;
     animation: example 1s 1;
}
@keyframes example {
  from {pointer-events:all }
  to {pointer-events:none}
}