3d.css (1626B)
1 html { position: relative; padding:0; } 2 html, body { width: 100%; height: 100%; overflow: hidden; } 3 4 .css3d { 5 position: absolute; 6 top: 10%; 7 left: 10%; 8 bottom: 10%; 9 right: 10%; 10 } 11 .css3d div { 12 width: 40%; 13 height: 40%; 14 border: thin solid red; 15 background: pink; 16 position: absolute; 17 } 18 .css3d div:nth-child(1) { top: 5%; left: 5%; } 19 .css3d div:nth-child(2) { bottom: 5%; right: 5%; } 20 21 .css3d #a1:after { 22 content: 'BEFOR'; 23 display: block; 24 border: thin solid green; 25 position: absolute; 26 width: 100%; 27 height: 100%; 28 opacity: 0.5; 29 z-index: 3; 30 background: white; 31 pointer-events: all; 32 } 33 .css3d #a1:after:hover { 34 border: 20px solid black; 35 background: blue; 36 } 37 38 .css3d :hover { opacity: 0.7; } 39 40 .css3d #a { pointer-events: none; } 41 .css3d #a * { pointer-events: all; } 42 .css3d #a:target { pointer-events: all; } 43 .css3d #a:hover { pointer-events: all; width: 70%; } 44 .css3d #a2 { left: 70%; } 45 .css3d #detector { 46 z-index: 1000; position: absolute; top: 0; bottom: 0; height: 0; width: 100%; height: 100%; 47 background: transparent; border: 10px solid rgba(100,1,0,0.4); 48 pointer-events: painted; 49 } 50 .css3d #detector:hover { 51 left: -100%; 52 transition: none; 53 } 54 .css3d #detector { 55 left: 100%; 56 transition: left 60s step-end; 57 } 58 59 .css3d iframe { width: 50%; height: 50%; } 60 61 .css3d div:focus-within { 62 border: thick solid blue; 63 } 64 65 .css3d div:active:after { 66 content:'active'; 67 } 68 69 .css3d div:target { 70 background: plum; 71 } 72 73 .css3d div:target-within { 74 border-style: dashed; 75 } 76 .css3d div.target-within { 77 border-style: dashed; 78 }