-
Notifications
You must be signed in to change notification settings - Fork 15
/
transform-origin-various-calculations.html
executable file
·68 lines (61 loc) · 2.37 KB
/
transform-origin-various-calculations.html
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
<!DOCTYPE html>
<html>
<head>
<title>Various origin calculations</title>
<style type="text/css">
body {display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px; max-width: min-content; padding: 10px; padding-bottom: 125px;}
body > div {position: relative; height: 150px; width: 150px; border: 1px solid red;
background: url(i/frame-sq.png); background-size: 100% 100%; background-origin: border-box;
transform-style: preserve-3d;}
div:nth-child(4n+1) {clear: left;}
div > div {width: 150px;
position: absolute; top: 100%; margin-top: 0.5em; left: 0; width: 100%; text-align: center;
text-align: center; white-space: pre; font: 18px Consolas, monospace;}
img.focus {position: absolute; top: 0; left: 0; margin: -6.5px 0 0 -6.5px; filter: drop-shadow(0 0 1px green) drop-shadow(0 0 1px green);}
#ex01 {transform-origin: 0 0;}
#ex01 + img.focus {left: 0; top: 0;}
#ex02 {transform-origin: 0 100%;}
#ex02 + img.focus {left: 0; top: 100%;}
#ex03 {transform-origin: 100% 0;}
#ex03 + img.focus {left: 100%; top: 0;}
#ex04 {transform-origin: 100% 100%;}
#ex04 + img.focus {left: 100%; top: 100%;}
#ex05 {transform-origin: 75% 25%;}
#ex05 + img.focus {left: 75%; top: 25%;}
#ex06 {transform-origin: 75% 25%;}
#ex06 + img.focus {left: 75px; top: 25px;}
#ex07 {transform-origin: 50% 100%;}
#ex07 + img.focus {left: 50%; top: 100%;}
#ex08 {transform-origin: 50% 50%;}
#ex08 + img.focus {left: 50%; top: 50%;}
#ex09 + img.focus {left: 50%; top: 0%;}
#ex10 + img.focus {left: 0%; top: 50%;}
#ex11 + img.focus {left: 50%; top: 100%;}
#ex12 + img.focus {left: 50%; top: 50%;}
</style>
</head>
<body>
<div><div id="ex01">0 0</div><img src="i/focus.png" class="focus" alt=""></div>
<div><div id="ex02">0 100%</div><img src="i/focus.png" class="focus" alt=""></div>
<div><div id="ex03">100% 0</div><img src="i/focus.png" class="focus" alt=""></div>
<div><div id="ex04">100% 100%</div><img src="i/focus.png" class="focus" alt=""></div>
<div><div id="ex09">50% 0%
50% top
top 50%
top center
center top</div><img src="i/focus.png" class="focus" alt=""></div>
<div><div id="ex10">0% 50%
left 50%
50% left
center left
left center</div><img src="i/focus.png" class="focus" alt=""></div>
<div><div id="ex11">50% 100%
50% bottom
center 100%
center bottom
bottom center</div><img src="i/focus.png" class="focus" alt=""></div>
<div><div id="ex12">50%
50% 50%
center</div><img src="i/focus.png" class="focus" alt=""></div>
</body>
</html>