html-experiment/css/perspective.html at main · ldpercy/html-experiment · 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
<!doctype html>
<html lang="en">
<head>
	<title>perspective</title>
	<meta charset="utf-8">
	<link rel="icon" href="../favicon.svg">
	<link rel="stylesheet" href="../[common]/style.css">
</head>
<body>
	<header>
		<h1><a href="">perspective</a></h1>
		<nav>
			<a class="colourScheme-selector" href="?colourScheme=light" title="Light colour scheme" data-colourscheme="light">🟓</a>
			<a class="colourScheme-selector" href="?colourScheme=dark" title="Dark colour scheme" data-colourscheme="dark">🟒</a>
			<a title="To folder" href="./">🖿</a>
			<a title="Parent folder" href="../">🡅</a>
		</nav>
	</header>

	<script type="module" src="../[html-common]/script/colourScheme-selector.js"></script>

	<main>

	<style contenteditable="plaintext-only" spellcheck="false">

		.grid-container {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr ;
			border: 2px solid green;
			margin:1ex;	padding:1ex; border-radius:1ex;
			&>* { margin:inherit; padding:inherit; border-radius:inherit;	}

			section {
				grid-column-start: 2;
				grid-column-end: 4;
			}
			aside { grid-column-start: 2; }
		}

		output { margin-top: 10em; }

		.transform-element {
			/* transform: rotateY(90deg) translateZ(50px); */
			transform: rotateX(15deg) rotateY(10deg) rotateZ(5deg);
			perspective: 10cm;
			perspective-origin: 50% 50%;

			section { transform: translateZ(4em); }
			aside { transform: translateZ(8em); }

		}

	</style>

	<pre>
		So far seems to be only a flattened 3d-like effect.

	</pre>

	<output class="pretty fullwidth">
		<div class="transform-element grid-container">
			<div>abcd</div>
			<div>efgh</div>
			<p>ijkl</p>

			<section>mnop</section>
			<aside>qrst</aside>
			<div>uvwx</div>
			<div>yz</div>
		</div>
	</output>

	</main>

</body>
</html>