csstdg5figs/13-table-layout-in-css/layers-formatting-schematic.html at main · meyerweb/csstdg5figs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>The formatting layers used in table presentation</title>
<link rel="stylesheet" type="text/css" href="c/baseline.css">
<style type="text/css">
body {height: 470px; width: 650px; perspective: flat; perspective-origin: 200px 0;}
body * {box-sizing: border-box;}
body section {transition: 3s; top: 30px;}
body:hover section {transform: rotate3d(0.5,-0.23,0.3,85deg); top: 220px;}

section {position: absolute; transform-style: preserve-3d;
	 left: 130px; height: 400px; width: 300px;}
section div {position: absolute; height: 100%; width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
	border: 2px solid gray;
	translateZ(0px); transition: 2s;}
body:hover section div {transition-delay: 1s;}
section div span {border: 2px solid gray;}

#cells {left: 0%; z-index: 5; transform: translateZ(4px);}
#cells span {background: rgba(128,255,128,1);}
#cells span:nth-child(1) {grid-column: 1; grid-row: 1 / span 2;}
#cells span:nth-child(2) {grid-column: 1; grid-row: 3;}
#cells span:nth-child(3) {grid-column: 1; grid-row: 4;}
#cells span:nth-child(4) {grid-column: 1; grid-row: 5;}
body:hover #cells {transform: translateZ(333px);}

#cells span:nth-child(5) {grid-column: 2 / span 2; grid-row: 1;}
#cells span:nth-child(6) {grid-column: 2 / span 2; grid-row: 2;}
#cells span:nth-child(7) {grid-column: 2; grid-row: 3;}
#cells span:nth-child(8) {grid-column: 2; grid-row: 5;}

#cells span:nth-child(9) {grid-column: 3; grid-row: 3;}
#cells span:nth-child(10) {grid-column: 3; grid-row: 4;}
#cells span:nth-child(11) {grid-column: 3; grid-row: 5;}

#rows {top: 0%; left: 0%; z-index: 4; transform: translateZ(4px);}
#rows span {background: rgba(255,128,128,0.95);}
#rows span {grid-column: 1 / span 3;}
#rows span:nth-child(1) {grid-row: 1;}
#rows span:nth-child(2) {grid-row: 2;}
#rows span:nth-child(3) {grid-row: 3;}
#rows span:nth-child(4) {grid-row: 4;}
#rows span:nth-child(5) {grid-row: 5;}
body:hover #rows {transform: translateZ(267px);}

#rowgroups {top: 0%; left: 0%; z-index: 3; transform: translateZ(3px);}
#rowgroups span {background: rgba(255,216,216,1);}
#rowgroups span {grid-column: 1 / span 3;}
#rowgroups span:nth-child(1) {grid-row: 1;}
#rowgroups span:nth-child(2) {grid-row: 2 / span 3;}
#rowgroups span:nth-child(3) {grid-row: 5;}
body:hover #rowgroups {transform: translateZ(200px);}

#cols {top: 0%; left: 0%; z-index: 2; transform: translateZ(2px);}
#cols span {background: rgba(128,255,255,0.95);}
#cols span {grid-row: 1 / span 5;}
#cols span:nth-child(1) {grid-column: 1;}
#cols span:nth-child(2) {grid-column: 2;}
#cols span:nth-child(3) {grid-column: 3;}
body:hover #cols {transform: translateZ(133px);}

#colgroups {top: 0%; left: 0%; z-index: 1; transform: translateZ(1px);}
#colgroups span {background: rgba(216,255,255,1);}
#colgroups span {grid-row: 1 / span 5;}
#colgroups span:nth-child(1) {grid-column: 1 / span 2;}
#colgroups span:nth-child(2) {grid-column: 3;}
body:hover #colgroups {transform: translateZ(67px);}

#table {background: rgba(255,128,255,0.5);}

body:hover #labels {opacity: 1; transition-delay: 2.5s;}
#labels {position: absolute; top: 67px; left: 512px;
	padding: 0; margin: 0; opacity: 0;  transition: 1s;}
#labels li {list-style: none; z-index: 100; font: bold 1.25em sans-serif;
	margin-bottom: 42px;}
</style>
</head>
<body>

<ol id="labels">
<li>Cells</li>
<li>Rows</li>
<li>Row groups</li>
<li>Columns</li>
<li>Column groups</li>
<li>Table</li>
</ol>

<section>
<div id="cells">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="rows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="rowgroups">
<span></span>
<span></span>
<span></span>
</div>
<div id="cols">
<span></span>
<span></span>
<span></span>
</div>
<div id="colgroups">
<span></span>
<span></span>
</div>
<div id="table"></div>
</section>

</body>
</html>