<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) ;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.