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