79 lines
1.6 KiB
CSS
79 lines
1.6 KiB
CSS
html { position: relative; padding:0; }
|
|
html, body { width: 100%; height: 100%; overflow: hidden; }
|
|
|
|
.css3d {
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 10%;
|
|
bottom: 10%;
|
|
right: 10%;
|
|
}
|
|
.css3d div {
|
|
width: 40%;
|
|
height: 40%;
|
|
border: thin solid red;
|
|
background: pink;
|
|
position: absolute;
|
|
}
|
|
.css3d div:nth-child(1) { top: 5%; left: 5%; }
|
|
.css3d div:nth-child(2) { bottom: 5%; right: 5%; }
|
|
|
|
.css3d #a1:after {
|
|
content: 'BEFOR';
|
|
display: block;
|
|
border: thin solid green;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.5;
|
|
z-index: 3;
|
|
background: white;
|
|
pointer-events: all;
|
|
}
|
|
.css3d #a1:after:hover {
|
|
border: 20px solid black;
|
|
background: blue;
|
|
}
|
|
|
|
.css3d :hover { opacity: 0.7; }
|
|
|
|
.css3d #a { pointer-events: none; }
|
|
.css3d #a * { pointer-events: all; }
|
|
.css3d #a:target { pointer-events: all; }
|
|
.css3d #a:hover { pointer-events: all; width: 70%; }
|
|
.css3d #a2 { left: 70%; }
|
|
.css3d #detector {
|
|
z-index: 1000; position: absolute; top: 0; bottom: 0; height: 0; width: 100%; height: 100%;
|
|
background: transparent; border: 10px solid rgba(100,1,0,0.4);
|
|
pointer-events: painted;
|
|
}
|
|
.css3d #detector:hover {
|
|
left: -100%;
|
|
transition: none;
|
|
}
|
|
.css3d #detector {
|
|
left: 100%;
|
|
transition: left 60s step-end;
|
|
}
|
|
|
|
.css3d iframe { width: 50%; height: 50%; }
|
|
|
|
.css3d div:focus-within {
|
|
border: thick solid blue;
|
|
}
|
|
|
|
.css3d div:active:after {
|
|
content:'active';
|
|
}
|
|
|
|
.css3d div:target {
|
|
background: plum;
|
|
}
|
|
|
|
.css3d div:target-within {
|
|
border-style: dashed;
|
|
}
|
|
.css3d div.target-within {
|
|
border-style: dashed;
|
|
}
|