Fun with CSS 3D transforms
This commit is contained in:
Suzanne Soy
parent
cabc141a41
commit
2321951235
72
index.html
72
index.html
|
|
@ -3,10 +3,82 @@
|
|||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Suzanne Soy’s page</title>
|
||||
<link rel="stylesheet" href="test.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Suzanne Soy</h1>
|
||||
<h2>Procedural Designer</h2>
|
||||
<p>Latest version of my <a href="https://jsmaniac.github.io/phc-thesis/phc-thesis/">Ph.D draft</a></p>
|
||||
<div class="scene">
|
||||
<div class="rest"></div>
|
||||
<div class="three-d room hover room-test">
|
||||
<div class="three-d object test" id="test">Hello world
|
||||
<div class="scene">
|
||||
<div class="rest"></div>
|
||||
<div class="three-d room hover room-test">
|
||||
<div class="three-d object test" id="test">It's turtles all the way down!
|
||||
<div class="scene">
|
||||
<div class="rest"></div>
|
||||
<div class="three-d room hover room-test">
|
||||
<div class="three-d object test">But… look on the other side:</div>
|
||||
</div>
|
||||
<div class="three-d room hover room-test2">
|
||||
<div class="three-d object test2">Don't use CSS to do this.</div>
|
||||
</div>
|
||||
<div class="three-d room">
|
||||
<div class="three-d wall wall-l"></div>
|
||||
<div class="three-d wall wall-r"></div>
|
||||
<div class="three-d wall wall-u"></div>
|
||||
<div class="three-d wall wall-d"></div>
|
||||
<div class="three-d wall wall-b"></div>
|
||||
<div class="three-d wall wall-f"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three-d room hover room-test2">
|
||||
<div class="three-d object test2">Nested rooms!</div>
|
||||
</div>
|
||||
<div class="three-d room">
|
||||
<div class="three-d wall wall-l"></div>
|
||||
<div class="three-d wall wall-r"></div>
|
||||
<div class="three-d wall wall-u"></div>
|
||||
<div class="three-d wall wall-d"></div>
|
||||
<div class="three-d wall wall-b"></div>
|
||||
<div class="three-d wall wall-f"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three-d room hover room-test2">
|
||||
<div class="three-d object test2">Mental palace
|
||||
<div class="scene">
|
||||
<div class="rest"></div>
|
||||
<div class="three-d room hover room-test">
|
||||
<div class="three-d object test" id="test">Oh my…</div>
|
||||
</div>
|
||||
<div class="three-d room hover room-test2">
|
||||
<div class="three-d object test2" id="test2">It's full of <div>s</div>
|
||||
</div>
|
||||
<div class="three-d room">
|
||||
<div class="three-d wall wall-l"></div>
|
||||
<div class="three-d wall wall-r"></div>
|
||||
<div class="three-d wall wall-u"></div>
|
||||
<div class="three-d wall wall-d"></div>
|
||||
<div class="three-d wall wall-b"></div>
|
||||
<div class="three-d wall wall-f"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three-d room">
|
||||
<div class="three-d wall wall-l"></div>
|
||||
<div class="three-d wall wall-r"></div>
|
||||
<div class="three-d wall wall-u"></div>
|
||||
<div class="three-d wall wall-d"></div>
|
||||
<div class="three-d wall wall-b"></div>
|
||||
<div class="three-d wall wall-f"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
132
test.css
Normal file
132
test.css
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
html { position: relative; padding:0; }
|
||||
html, body { height: 100%; }
|
||||
|
||||
.scene {
|
||||
position: absolute;
|
||||
perspective: 100vmin;
|
||||
opacity: 0.9;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100vmin;
|
||||
height: 100vmin;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.scene .scene {
|
||||
transform: translate(-50%, -50%) scale(0.9);
|
||||
overflow: hidden;
|
||||
border: thin solid blue;
|
||||
}
|
||||
|
||||
.scene .test2 .scene { transform: translate(-50%, -50%) scale(0.25); }
|
||||
|
||||
.three-d {
|
||||
position: absolute;
|
||||
border: thin solid red;
|
||||
background: pink;
|
||||
transition: transform ease 2s;
|
||||
transform-style: preserve-3d;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
:root {
|
||||
--origin: translate3d(-50%, -50%, -50vmin);
|
||||
--origin-: translate3d(50%, 50%, 50vmin);
|
||||
}
|
||||
|
||||
:root {
|
||||
--test: translate3d(-49vmin, 0vmin, 0vmin) rotateY(90deg) scale(0.6);
|
||||
--test-: rotateY(-90deg) translate3d(49vmin, 0vmin, 0vmin);
|
||||
--test-hover: translate3d(0vmin,0,50vmin) rotateY(0deg) scale(1);
|
||||
}
|
||||
|
||||
.test { width: 90vmin; height: 90vmin; transform: var(--origin) var(--test); }
|
||||
.test:hover { transform: var(--origin) var(--test-hover); }
|
||||
|
||||
:root {
|
||||
--test2: translate3d(49vmin, 0vmin, 0vmin) rotateY(-90deg);
|
||||
--test2-: rotateY(90deg) translate3d(-49vmin, 0vmin, 0vmin);
|
||||
--test2-hover: translate3d(0,0,50vmin) rotateY(0deg);
|
||||
}
|
||||
|
||||
:root {
|
||||
--opacity: 1;
|
||||
}
|
||||
|
||||
.test2 { width: 50vmin; height: 25vmin; transform: var(--origin) var(--test2); opacity: var(--opacity); }
|
||||
.test2:hover { transform: var(--origin) var(--test2-hover) scale(2); }
|
||||
|
||||
.hover { z-index: 20; }
|
||||
.hover:hover { z-index: 30; }
|
||||
|
||||
.hover .hover { z-index: 40; }
|
||||
.hover:hover .hover:hover { z-index: 50; }
|
||||
|
||||
.wall-l { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translateX(-50vmin) rotateY(90deg); }
|
||||
.wall-r { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translateX(50vmin) rotateY(90deg); }
|
||||
.wall-u { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translateY(-50vmin) rotateX(90deg); }
|
||||
.wall-d { opacity: 0.7; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translateY(50vmin) rotateX(90deg); }
|
||||
.wall-b { opacity: 0.3; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translateZ(-50vmin); }
|
||||
.wall-f { opacity: 0.1; background: var(--rainbow); width: 100vmin; height: 100vmin; transform: var(--origin) translateZ(50vmin);
|
||||
pointer-events: none; }
|
||||
|
||||
.wall { pointer-events: none; }
|
||||
|
||||
@keyframes turntable {
|
||||
0% { transform: rotateY(0); }
|
||||
100% { transform: rotateY(360); }
|
||||
}
|
||||
|
||||
.room { transform: translate3d(0,0,0) rotate(0); }
|
||||
.room-test:hover ~ .room { transform: var(--origin) var(--test-hover) var(--test-) var(--origin-); }
|
||||
.room-test:hover ~ .room .test2 {
|
||||
/*animation: fadeOut 1s;*/
|
||||
opacity: 0;
|
||||
left: 999px;
|
||||
transition: translate 2s, opacity 1s, left step-end 1s;
|
||||
}
|
||||
.room .test2 { transition: transform ease 2s, opacity 1s linear 1s, left step-end 1s; }
|
||||
.room-test2:hover ~ .room { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); }
|
||||
/* .room { animation: 4s turntable infinite; } */
|
||||
/* .room { } */
|
||||
/*.room * { pointer-events: none; }*/
|
||||
|
||||
:root {
|
||||
--rainbow-saturation: 80%;
|
||||
--rainbow-lightness: 40%;
|
||||
--rainbow: linear-gradient(
|
||||
45deg,
|
||||
hsl(0, var(--rainbow-saturation), var(--rainbow-lightness)) 0%,
|
||||
hsl(36, var(--rainbow-saturation), var(--rainbow-lightness)) 10%,
|
||||
hsl(72, var(--rainbow-saturation), var(--rainbow-lightness)) 20%,
|
||||
hsl(108, var(--rainbow-saturation), var(--rainbow-lightness)) 30%,
|
||||
hsl(144, var(--rainbow-saturation), var(--rainbow-lightness)) 40%,
|
||||
hsl(180, var(--rainbow-saturation), var(--rainbow-lightness)) 50%,
|
||||
hsl(216, var(--rainbow-saturation), var(--rainbow-lightness)) 60%,
|
||||
hsl(252, var(--rainbow-saturation), var(--rainbow-lightness)) 70%,
|
||||
hsl(288, var(--rainbow-saturation), var(--rainbow-lightness)) 80%,
|
||||
hsl(324, var(--rainbow-saturation), var(--rainbow-lightness)) 90%,
|
||||
hsl(360, var(--rainbow-saturation), var(--rainbow-lightness)) 100%)
|
||||
}
|
||||
|
||||
.rest { position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
|
||||
.scene:hover > .rest:not(:hover) ~ .room.room-test:not(:hover) { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); }
|
||||
.scene:hover > .rest:not(:hover) ~ .room:not(:hover) .test { opacity: 0; left: 999px; transition: translate 2s, opacity 1s, left step-end 1s; }
|
||||
.room .test { transition: transform ease 2s, opacity 1s linear 1s, left step-end 1s; }
|
||||
|
||||
.object:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
.object:before {
|
||||
content: "← back";
|
||||
border: thin solid brown;
|
||||
background: white;
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
transform: translate(0, -100%);
|
||||
opacity: 0;
|
||||
transition: opacity 1s linear 1s;
|
||||
pointer-events: none;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user