Skip to content

Commit 536d7d7

Browse files
captainbrossetcaptainbrosset
committed
New devtools 3d view demo
1 parent 69541f1 commit 536d7d7

File tree

7 files changed

+358
-0
lines changed

7 files changed

+358
-0
lines changed

‎devtools-3d/delorean.png

32.7 KB
Loading

‎devtools-3d/flux.png

47.1 KB
Loading

‎devtools-3d/guitar.png

18.8 KB
Loading

‎devtools-3d/hoverboard.png

34.3 KB
Loading

‎devtools-3d/index.html

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>3D View demo</title>
5+
<meta charset="utf-8" />
6+
<link
7+
rel="icon"
8+
type="image/png"
9+
sizes="32x32"
10+
href="../shared/img/logo.png"
11+
/>
12+
<link rel="stylesheet" href="../shared/css/shared.css" />
13+
<link rel="stylesheet" href="style.css" />
14+
</head>
15+
<body>
16+
<div class="root">
17+
<a href="#article" class="skip-link">Skip to main content</a>
18+
<h1>Microsoft Edge DevTools 3D View tool demo</h1>
19+
20+
<div class="intro">
21+
<div>
22+
<div>
23+
<div>
24+
<div>
25+
<div>
26+
<div>
27+
<div>
28+
<div>
29+
<div>
30+
<div>
31+
<p>
32+
This is a demo of the 3D View tool in Microsoft
33+
Edge DevTools.
34+
<a
35+
href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/3d-view/"
36+
>Open the tool</a
37+
>
38+
now to explore the page in 3D.<br />
39+
This page contains deeply nested DOM elements,
40+
out-of-document elements, an unwanted scrollbar,
41+
and composited layers, which are all interesting
42+
things to explore with the 3D View tool.
43+
</p>
44+
</div>
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
56+
<img
57+
src="delorean.png"
58+
alt="A hand drawing of the delorean car in the Back to the Future movie"
59+
/>
60+
61+
<main id="article">
62+
<h2>Some text below!</h2>
63+
<p>
64+
You do? I have to tell you about the future. Yeah, I think maybe you
65+
do. Doc. No, it was The Enchantment Under The Sea Dance. Our first
66+
date. It was the night of that terrible thunderstorm, remember George?
67+
Your father kissed me for the very first time on that dance floor. It
68+
was then I realized I was going to spend the rest of my life with him.
69+
</p>
70+
<p>
71+
No, bastards. After I fell off my toilet, I drew this. No wait, Doc,
72+
the bruise, the bruise on your head, I know how that happened, you
73+
told me the whole story. you were standing on your toilet and you were
74+
hanging a clock, and you fell, and you hit your head on the sink, and
75+
that's when you came up with the idea for the flux capacitor, which
76+
makes time travel possible. Re-elect Mayor Goldie Wilson. Progress is
77+
his middle name. That's good advice, Marty.
78+
</p>
79+
<p>
80+
Yeah Mom, we know, you've told us this story a million times. You felt
81+
sorry for him so you decided to go with him to The Fish Under The Sea
82+
Dance. Yeah well, you shouldn't drink. Wait a minute, wait a minute,
83+
Doc, are you telling me that you built a time machine out of a
84+
delorean. Yoo. This Saturday night, mostly clear, with some scattered
85+
clouds. Lows in the upper forties.
86+
</p>
87+
88+
<h2>And more text!</h2>
89+
<p>
90+
Listen, I gotta go but I wanted to tell you that it's been
91+
educational. Well, Marty, I'm almost eighteen-years-old, it's not like
92+
I've never parked before. Now remember, according to my theory you
93+
interfered with with your parent's first meeting. They don't meet,
94+
they don't fall in love, they won't get married and they wont have
95+
kids. That's why your older brother's disappeared from that
96+
photograph. Your sister will follow and unless you repair the damages,
97+
you will be next. Don't tell me. Uh, you want me to buy a subscription
98+
to the Saturday Evening Post? What's that thing he's on?
99+
</p>
100+
101+
<ul class="images">
102+
<li id="slide-1">
103+
<img
104+
src="hoverboard.png"
105+
alt="A hand drawing of the hoverboard in the Back to the Future movie"
106+
/>
107+
</li>
108+
<li id="slide-2">
109+
<img
110+
src="flux.png"
111+
alt="A hand drawing of the flux capacitor in the Back to the Future movie"
112+
/>
113+
</li>
114+
<li id="slide-3">
115+
<img
116+
src="guitar.png"
117+
alt="A hand drawing of the guitar used by the main character in the Back to the Future movie"
118+
/>
119+
</li>
120+
<li id="slide-4">
121+
<img
122+
src="delorean.png"
123+
alt="A hand drawing of the Delorean car in the Back to the Future movie"
124+
/>
125+
</li>
126+
<li id="slide-5">
127+
<img
128+
src="shoe.png"
129+
alt="A hand drawing of the future shoes the main character wears in the Back to the Future movie"
130+
/>
131+
</li>
132+
</ul>
133+
<ul class="images-nav">
134+
<li>
135+
<a href="#slide-1">1</a>
136+
</li>
137+
<li>
138+
<a href="#slide-2">2</a>
139+
</li>
140+
<li>
141+
<a href="#slide-3">3</a>
142+
</li>
143+
<li>
144+
<a href="#slide-4">4</a>
145+
</li>
146+
<li>
147+
<a href="#slide-5">5</a>
148+
</li>
149+
</ul>
150+
151+
<p>
152+
Good evening, I'm Doctor Emmet Brown, I'm standing here on the parking
153+
lot of- What was it, George, bird watching? Oh no, don't touch that.
154+
That's some new specialized weather sensing equipment. Shut your
155+
filthy mouth, I'm not that kind of girl. Here you go, lady. There's a
156+
quarter.
157+
</p>
158+
<p>
159+
Hey Marty, I'm not your answering service, but you're outside pouting
160+
about the car, Jennifer Parker called you twice. Now which one was it,
161+
Greg or Craig? My name's Lorraine, Lorraine Baines. Your, your right.
162+
You're George McFly.
163+
</p>
164+
</main>
165+
166+
<footer>
167+
<div id="section-nav" class="section-nav">
168+
<div class="bottom">
169+
<ul>
170+
<li class="logo"><a href="#">Marty</a></li>
171+
<li class="active"><a href="#">Emmet</a></li>
172+
<li><a href="#">George</a></li>
173+
<li><a href="#">Lorraine</a></li>
174+
<li><a href="#">The Sea Dance</a></li>
175+
<li></li>
176+
</ul>
177+
</div>
178+
</div>
179+
</footer>
180+
</div>
181+
182+
<div class="easter">
183+
<div style="width: 40px">
184+
<div style="width: 10px; left: 30px">
185+
<div style="width: 10px">
186+
<div style="width: 40px; left: -30px">
187+
<div style="width: 10px; left: 30px">
188+
<div style="width: 10px">
189+
<div style="width: 40px; left: -30px"></div>
190+
</div>
191+
</div>
192+
</div>
193+
</div>
194+
</div>
195+
</div>
196+
<div style="width: 20px; left: 60px">
197+
<div style="width: 10px; left: 10px">
198+
<div style="width: 10px">
199+
<div style="width: 10px">
200+
<div style="width: 10px">
201+
<div style="width: 10px">
202+
<div style="width: 20px; left: -10px"></div>
203+
</div>
204+
</div>
205+
</div>
206+
</div>
207+
</div>
208+
</div>
209+
<div style="width: 20px; left: 80px">
210+
<div style="width: 20px; left: 10px">
211+
<div style="width: 20px; left: 10px">
212+
<div style="width: 10px; left: 10px">
213+
<div style="width: 20px; left: -10px">
214+
<div style="width: 20px; left: -10px">
215+
<div style="width: 20px; left: -10px"></div>
216+
</div>
217+
</div>
218+
</div>
219+
</div>
220+
</div>
221+
</div>
222+
</div>
223+
</body>
224+
</html>

‎devtools-3d/shoe.png

28.3 KB
Loading

‎devtools-3d/style.css

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
html {
2+
margin: 0;
3+
font-size: 18pt;
4+
}
5+
6+
body {
7+
margin: 0;
8+
padding: 0 2rem;
9+
}
10+
11+
.root {
12+
margin: 5rem auto;
13+
max-width: 800px;
14+
overflow-x: scroll;
15+
}
16+
17+
.intro {
18+
padding: 1rem;
19+
background: #f063;
20+
font-size: smaller;
21+
}
22+
23+
.intro p {
24+
margin: 0;
25+
}
26+
27+
.skip-link {
28+
position: absolute;
29+
top: -100px;
30+
left: -100px;
31+
}
32+
33+
ul,
34+
li {
35+
margin: 0;
36+
padding: 0;
37+
list-style: none;
38+
}
39+
40+
* {
41+
box-sizing: content-box;
42+
}
43+
44+
.images {
45+
padding: 1rem;
46+
display: flex;
47+
align-items: center;
48+
overflow: hidden;
49+
scroll-snap-type: x mandatory;
50+
scroll-behavior: smooth;
51+
-webkit-overflow-scrolling: touch;
52+
transform: translateZ(0);
53+
}
54+
55+
.images li {
56+
scroll-snap-align: start;
57+
flex: 100% 0 0;
58+
display: grid;
59+
place-items: center;
60+
}
61+
62+
.images img {
63+
height: 15vh;
64+
}
65+
66+
.images-nav {
67+
display: flex;
68+
gap: 1rem;
69+
justify-content: center;
70+
}
71+
72+
.images-nav li {
73+
background: #f063;
74+
border-radius: 50%;
75+
flex: 2rem 0 0;
76+
height: 2rem;
77+
display: grid;
78+
place-items: center;
79+
}
80+
81+
.images-nav li a,
82+
.images-nav li a:visited {
83+
color: black;
84+
text-decoration: none;
85+
}
86+
87+
footer {
88+
display: table;
89+
width: 100%;
90+
text-align: center;
91+
margin: 0 auto;
92+
}
93+
94+
footer .bottom {
95+
background-color: #444;
96+
width: 100%;
97+
display: inline-block;
98+
padding: 10px;
99+
text-align: center;
100+
}
101+
102+
footer ul {
103+
text-align: center;
104+
}
105+
106+
footer li {
107+
display: inline;
108+
padding: 0 15px;
109+
text-align: center;
110+
margin: auto 0;
111+
position: relative;
112+
}
113+
114+
footer a {
115+
-webkit-transition: 400ms;
116+
-moz-transition: 400ms;
117+
-o-transition: 400ms;
118+
transition: 400ms;
119+
color: #bbb;
120+
font-weight: 700;
121+
outline: 0;
122+
text-decoration: none;
123+
}
124+
125+
.easter {
126+
position: relative;
127+
height: 10px;
128+
}
129+
.easter div {
130+
position: absolute;
131+
height: 10px;
132+
top: 0;
133+
left: 0;
134+
}

0 commit comments

Comments
 (0)