<input type="radio" name="size" id="left">
    <input type="radio" name="size" id="center" checked>
    <input type="radio" name="size" id="right">    
<div class="screen">
        <div class="room">
            <div class="pared_left">
              <label class="left" for="left"></label>
            </div>
            <div class="pared_front">
              <label class="center" for="center"></label>
              <div class="door"> 
                <div class="cerradura"></div>
              </div>
            </div>
            <div class="pared_right">
              <label class="right" for="right"></label>
          </div>
            <div class="floor"></div>
        </div>
    </div>
* {
	box-sizing: border-box;
}
.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;
	height: 400em;
	transition: transform ease-in-out 0.3s;
	transform-style: preserve-3d;
	transform: translatex(-50em) translatez(-150em) ;

}
:before,:after {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	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: 60em;
	height: 25em;
	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
}
/*----  interacción  ---*/
#right:checked ~.screen .room {
    transform:   translatex(-50em) rotatey(45deg);
}
#left:checked ~.screen .room {
    transform: translatex(-50em) rotatey(-45deg) ;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.