Work Text:
Introduction:
- Decoration Background from Zed Dash's repeating-linear-gradient background image, modified a little bit by me.
- This work assumes that you know the basics of CSS and HTML. I can't help you with that.
- This work assumes you atleast have some experience with Workskins.
- If you plan to use this in a work, please credit me, this took so loong.
- Not really accessible or even screen reader compatible.
Someone test this.Nope, definitely not (And thanks for Charles_Rockafellor for testing it out!). - Not going to apologize for the heavy amounts of CSS (← this is going to be in every work probably).
- There are comments in the code you might want to read.
How do you even start a.. tutorial, or whatever this work is? Is this even the correct way to do an introduction? Um, don't answer that.. Anyway, have you ever wondered that something like 3D (or something kinda close to it) Objects can be done? Yeah, me too. Luckily I have the skills to make this a reality and that some of the 3D Transforms are allowed.
Model Station:
Note: Adjust Model is for transforming the entire model, and Adjust Elements is for parts of that model, try touching one of its faces when activating one of its options like ↺.
You didn't enable Creator's Style. Enable it to see Model Station. Make sure you have the corporate baseline browsers.
Unfortunately as of writing this I don't have the skills to make anything other than cuboids, that'll come in later and I'll remove this sentence once I do.
You're probably wondering on how did I do this, but first let me explain the cuboids a little bit:
Quboid:
Is a cuboid that works on almost any HTML element, so if you want to say make the cuboid a <p>, you can do that. Every face is grouped with each other so if I change front face's height, the back face would follow, blablabla you get the point.
Speaking of back faces, I moved it in the Z axis, what do I mean by that? Well, let's take a look at the code (for those asking why there is no syntax highlighting, I got sick of doing it manually so you have to deal with this unless someone has a solution that isn't complicated):
#workskin .quboid > .fc-back { transform-origin: center bottom -48px; }
See that? The third value? -48px? That's what makes it move in the Z axis. It does not make the back face smaller or bigger, it just moves the z axis origin point (from what I can understand).
Cuboid:
Is the first cuboid I made with mental gymnastics and pseudo elements. It is made to work with every text-level HTML element (or anything that allows text directly as a child of its parent like <p> or <blockquote>). Every face is grouped too. If you want to make some cube art just use this one it doesn't require many HTML elements, just 2. Make sure you make the child of the element always the first one, and then comes the text.
Kyuboid:
Is a cuboid that is just the same as Quboid but the only difference is that every face is not tied with eachother. It is the ideal cuboid to make a house, unlike Quboid and especially not a pain to deal with.
Alright, with that out of the way. Let's take a look on how Model Station works.
How it works (only the primary logic):
How do I even begin to explain any of this... okay so, I'll just explain it by code or whatever since it's easier. The explanations are going to be very bare bones since there is not that much to explain in my opinion.
#workskin .model-station .viewer [class|='model'] { transform-style: preserve-3d; }
This (I'll be saying this word a lot along with other words) is to force every model to become 3D.
<div class="mv-down"><div class="mv-up"><div class="mv-right"><div class="mv-left"><div class="rt-zown"><div class="rt-zup"><div class="rt-down"><div class="rt-up"><div class="rt-right"><div class="rt-left"><div class="sc-down-vc"><div class="sc-down-hz"><div class="sc-up-vc"><div class="sc-up-hz"><div class="sc-down"><div class="sc-up"><div class="sk-up-hz"><div class="sk-up-vc"><div class="sk-down-hz"><div class="sk-down-vc"><div class="sk-down"><div class="sk-up"> [...] </div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
/* this is adjust model */ #workskin .model-station .viewer :is([class|='rt'], [class|='mv'], [class|='sc'], [class|='sk']), /* this is adjust elements */ #workskin .model-station:has(.adjust-elements [open]) .viewer [class|='model'] > * :where(*) { transition-property: transform; transition-delay: 999999999999999s; transition-timing-function: linear; /* don't remove */ transform-style: preserve-3d; }
This is to make it so every single div in that wait a very long time before doing anything. As for the 11 divs, it's because I can't stack transforms or else it won't stay very long. The | in the attribute selector is to select anything that is immediately followed by a hypen, for example [class|='fc'] will select any class that starts with .fc-.
#workskin .model-station .viewer :is([class|='rt'], [class|='mv'], [class|='sc'], [class|='sk']) { z-index: -11; /* -2147483648 if you want to lmao */ width: 0; height: 0; }
This makes every 11 divs not have size so it won't block anything and make the text in the models selectable.
#workskin .model-station:has(.adjust-model li:active) .viewer :is([class|='rt'], [class|='mv'], [class|='sc'], [class|='sk']), #workskin .model-station:has(.adjust-elements [open]) .viewer [class|='model'] > * :where(*):active { transition-delay: 0s; }
Makes it so that if you press any button in Adjust Model/enable any options in Adjust Elements and touch one of its face in the model it will remove that long wait so it can transform the model.
#workskin .model-station .viewer :is([class|='rt'], [class|='mv'], [class|='sc'], [class|='sk']), #workskin .model-station .viewer [class|='model'] > * :where(*) { transition-duration: 330s; }
This makes the adjusting/transforming of the models not go very fast. This the default speed.
#workskin .model-station:has(.adjust-model .rotate-left:active) .viewer .rt-x { transform: rotateY(50000deg); /* can't even use turn units, how sad */ }
This makes it so if you for example pressed ← in the rotate section of model, only .rotate-right (the div) will rotate to the left, not the model itself, it stays untouched.
#workskin .model-station:has(.adjust-elements .rotate-left [open]) .viewer [class|='model'] > * :where(*):active { transform: rotateY(50000deg); }
This makes it so if you enabled for example ← in the rotate section of elements, and then touch one of the model's face⸻let's say left face⸻for long enough, the .fc-left you touched will rotate to the left.
#workskin .model-station:has(.adjust-elements .rotate-left [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .rotate-left:active) .viewer .rt-x { transform: rotateY(50000deg); }
Combined, it looks like this.
The Codes:
Click here for the CSS codes
Model Station
#workskin .model-station-metadata1 { content: 'Workskin // Model Station by Mewsmodeus (Mewzebub)'; } #workskin .model-station-metadata2 { content: 'Work // ao3.org/works/68394471, squidgeworld.org/works/80793'; } #workskin .model-station .hidden { display: inherit; /* this overrides the archive's .hidden class and make it show */ } #workskin .model-station .hide { display: none; } #workskin .model-station .controls { text-align: center; margin: .5em auto; } #workskin .model-station .controls .nav { display: inline-block; } #workskin .model-station .controls :is(.nav, [class|='adjust']) { margin: .4em; border: .15em solid; width: unset; } #workskin .model-station .controls .nav :is(ul, dl) { margin: 0 .5em; padding: 0; } #workskin .model-station .controls :is(details, dt, dd) { margin: 0; text-align: center; } #workskin .model-station .controls dt { font-weight: 700; } #workskin .model-station .controls :is(dt, dd)::before, #workskin .model-station li::marker { content: none; } #workskin .model-station .controls > dl:has(dd dl) > dt { font-size: large; text-decoration: underline; } #workskin .model-station .controls .nav li { transition: border 150ms ease-in-out; display: inline-block; margin: .1em auto; padding-left: .5em; padding-right: .5em; border: .15em solid; cursor: pointer; user-select: none; list-style-type: none; } #workskin .model-station .controls .nav :is(a, a:hover, a:focus) { transition: border 150ms ease-in-out; background: 0; outline: 0 !important; border-bottom: 0; color: inherit; } #workskin .model-station .controls summary { list-style-type: none; } #workskin .model-station .controls summary, #workskin .model-station .controls [open]::details-content { border: 0; padding: 0; background: none; } /* visually hidden p, you can use search to find it */ #workskin .model-station .controls details p { position: absolute; overflow: hidden; clip: rect(0 0 0 0); width: 1px; font-size: 0; height: 1px; white-space: nowrap; } #workskin .model-station .controls :is(.adjust, .settings, [class|='adjust']) li:has([open]), #workskin .model-station .controls .nav li:active { border-style: dashed; } #workskin .model-station .controls :is(.adjust, .settings) summary::before { content: '+ ️'; transition: all 150ms ease-in-out; } #workskin .model-station .controls :is(.adjust, .settings) [open] summary::before { content: '- '; } #workskin .model-station .controls [class|='adjust'] summary::before { content: '\25A1 '; } #workskin .model-station .controls [class|='adjust'] [open] summary::before { content: '\25A3 '; } #workskin .model-station:has(.adjust-elements [open]) .viewer [class|='model'] > * :where(*):active { box-shadow: 0 0 0 .3em; user-select: none; } #workskin .model-station:has(.adjust-model li:active) .viewer :is([class|='rt'], [class|='mv'], [class|='sc'], [class|='sk']), #workskin .model-station:has(.adjust-elements [open]) .viewer [class|='model'] > * :where(*):active { transition-delay: 0s; } /* the transformations, don't know whst to call it */ #workskin .model-station:has(.adjust-elements .rotate-left [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .rotate-left:active) .viewer .rt-x { transform: rotateY(50000deg); } #workskin .model-station:has(.adjust-elements .rotate-right [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .rotate-right:active) .viewer .rt-x { transform: rotateY(-50000deg); } #workskin .model-station:has(.adjust-elements .rotate-up [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .rotate-up:active) .viewer .rt-y { transform: rotateX(-50000deg); } #workskin .model-station:has(.adjust-elements .rotate-down [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .rotate-down:active) .viewer .rt-y { transform: rotateX(50000deg); } #workskin .model-station:has(.adjust-elements .rotate-zup [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .rotate-zup:active) .viewer .rt-z { transform: rotate(-50000deg); } #workskin .model-station:has(.adjust-elements .rotate-zown [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .rotate-zown:active) .viewer .rt-z { transform: rotate(50000deg); } #workskin .model-station:has(.adjust-elements .move-left [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .move-left:active) .viewer .mv-x { transform: translateX(-3125pc); } #workskin .model-station:has(.adjust-elements .move-right [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .move-right:active) .viewer .mv-x { transform: translateX(3125pc); } #workskin .model-station:has(.adjust-elements .move-up [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .move-up:active) .viewer .mv-y { transform: translateY(-3125pc); } #workskin .model-station:has(.adjust-elements .move-down [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .move-down:active) .viewer .mv-y { transform: translateY(3125pc); } #workskin .model-station:has(.adjust-elements .scale-up-horizontal [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .scale-up-horizontal:active) .viewer .sc-x { transform: scaleX(50); } #workskin .model-station:has(.adjust-elements .scale-up-vertical [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .scale-up-vertical:active) .viewer .sc-y { transform: scaleY(50); } #workskin .model-station:has(.adjust-elements .scale-down-horizontal [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .scale-down-horizontal:active) .viewer .sc-x { transform: scaleX(-50); } #workskin .model-station:has(.adjust-elements .scale-down-vertical [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .scale-down-vertical:active) .viewer .sc-y { transform: scaleY(-50); } #workskin .model-station:has(.adjust-elements .scale-up [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .scale-up:active) .viewer .sc-xy { transform: scale(50, 50); } #workskin .model-station:has(.adjust-elements .scale-down [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .scale-down:active) .viewer .sc-xy { transform: scale(-50, -50); } #workskin .model-station:has(.adjust-elements .skew-up-horizontal [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .skew-up-horizontal:active) .viewer .sk-x { transform: skewX(500deg); } #workskin .model-station:has(.adjust-elements .skew-up-vertical [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .skew-up-vertical:active) .viewer .sk-y { transform: skewY(500deg); } #workskin .model-station:has(.adjust-elements .skew-down-horizontal [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .skew-down-horizontal:active) .viewer .sk-x { transform: skewX(-500deg); } #workskin .model-station:has(.adjust-elements .skew-down-vertical [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .skew-down-vertical:active) .viewer .sk-y { transform: skewY(-500deg); } #workskin .model-station:has(.adjust-elements .skew-up [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .skew-up:active) .viewer .sk-xy { transform: skew(500deg, 500deg); } #workskin .model-station:has(.adjust-elements .skew-down [open]) .viewer [class|='model'] > * :where(*):active, #workskin .model-station:has(.adjust-model .skew-down:active) .viewer .sk-xy { transform: skew(-500deg, -500deg); } #workskin .model-station .viewer { position: relative; padding-bottom: 30em; width: 80%; margin: 0 auto; overflow: hidden; border: .15em solid; } #workskin .model-station .viewer [class|='model'] { transform-style: preserve-3d; } #workskin .model-station .viewer :is([class|='rt'], [class|='mv'], [class|='sc'], [class|='sk']), #workskin .model-station:has(.adjust-elements [open]) .viewer [class|='model'] > * :where(*) { transition-property: transform; transition-delay: 999999999999999s; /* the max is 2147483647s but I'm scared to change it */ transition-timing-function: linear; transform-style: preserve-3d; } #workskin .model-station .viewer :is([class|='rt'], [class|='mv'], [class|='sc'], [class|='sk']) { z-index: -11; /* the number does not mean anything here honestly, just that it's negative */ width: 0; height: 0; } #workskin .model-station .viewer :is([class|='rt'], [class|='mv'], [class|='sc'], [class|='sk']), #workskin .model-station .viewer [class|='model'] > * :where(*) { transition-duration: 330s; /* default speed, lower than medium lol */ } /* the speed options */ #workskin .model-station:has(.adjust-model .speed-slow [open]) .viewer :is([class|='rt'], [class|='mv'], [class|='sc'], [class|='sk']), #workskin .model-station:has(.adjust-elements .speed-slow [open]) .viewer [class|='model'] > * :where(*) { transition-duration: 1930s; } #workskin .model-station:has(.adjust-model .speed-medium [open]) .viewer :is([class|='rt'], [class|='mv'], [class|='sc'], [class|='sk']), #workskin .model-station:has(.adjust-elements .speed-medium [open]) .viewer [class|='model'] > * :where(*) { transition-duration: 220s; } #workskin .model-station:has(.adjust-model .speed-fast [open]) .viewer :is([class|='rt'], [class|='mv'], [class|='sc'], [class|='sk']), #workskin .model-station:has(.adjust-elements .speed-fast [open]) .viewer [class|='model'] > * :where(*) { transition-duration: 90s; } #workskin .model-station:has(.adjust-model .speed-superfast [open]) .viewer :is([class|='rt'], [class|='mv'], [class|='sc'], [class|='sk']), #workskin .model-station:has(.adjust-elements .speed-superfast [open]) .viewer [class|='model'] > * :where(*) { transition-duration: 1s; } /* the settings, it is optional depending on your use case */ #workskin .model-station:has(.controls .settings .outline[open]) .viewer *:not(> .hide) { outline: .3em solid !important; } #workskin .model-station:has(.controls .settings .outline[open]) .viewer *:not(> .hide)::before { outline: .3em dashed !important; } #workskin .model-station:has(.controls .settings .outline[open]) .viewer *:not(> .hide)::after { outline: .3em dotted !important; } #workskin .model-station:has(.controls .settings .overflowshow[open]) .viewer { overflow: visible; } #workskin .model-station .controls [class|='adjust'], #workskin .model-station .controls:has([class|='adjust']), #workskin .model-station .viewer [class|='model'], #workskin .model-station .controls summary::-webkit-details-marker { display: none; } #workskin .model-station:has(.controls .adjust [open]) .controls:has([class|='adjust']), #workskin .model-station:has(.controls .adjust .model[open]) .controls .adjust-model, #workskin .model-station:has(.controls .adjust .elements[open]) .controls .adjust-elements { display: block; } #workskin .model-station .viewer:not(:has([class|='model']:not(.model-1) [name|='model']:target)) .model-1, #workskin .model-station .viewer [class|='model']:has([name|='model']:target) { display: inherit; }
Cuboids
#workskin .quboid { position: relative; } #workskin .quboid > [class|='fc'] { position: absolute; } #workskin .quboid, #workskin .quboid > [class|='fc'] { margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; } #workskin .quboid > .fc-front { transform-origin: bottom; background: blue; } #workskin .quboid > .fc-back { transform: rotateY(180deg); bottom: 0; left: 0; right: 0; background: red; } #workskin .quboid > .fc-left { transform: rotateY(-90deg) translateX(-100%); transform-origin: left; right: 0; left: 0; bottom: 0; background: yellow; } #workskin .quboid > .fc-right { transform: rotateY(90deg) translateX(100%); transform-origin: right; right: 0; bottom: 0; background: cyan; } #workskin .quboid > .fc-top { transform: rotateX(90deg) translateY(-100%); transform-origin: top; top: 0; background: purple; } #workskin .quboid > .fc-bottom { transform: rotateX(-90deg) translateY(100%); transform-origin: bottom; left: 0; right: 0; bottom: 0; background: gold; } #workskin .quboid, #workskin .quboid > .fc-front, #workskin .quboid > .fc-back, #workskin .quboid > .fc-top, #workskin .quboid > .fc-bottom { width: 96px; } #workskin .quboid, #workskin .quboid > .fc-front, #workskin .quboid > .fc-back, #workskin .quboid > .fc-left, #workskin .quboid > .fc-right { height: 96px; } #workskin .quboid > .fc-left, #workskin .quboid > .fc-right { width: 96px; } #workskin .quboid > .fc-top, #workskin .quboid > .fc-bottom { height: 96px; } #workskin .quboid > .fc-back { transform-origin: center bottom -48px; /* legit great, didn't even have to do a plane */ } #workskin .cuboid { margin: 0; padding: 0; list-style: none; position: relative; transform-origin: center; background: purple; } #workskin .cuboid, #workskin .cuboid::before, #workskin .cuboid::after, #workskin .cuboid > *:first-child, #workskin .cuboid > *:first-child::before, #workskin .cuboid > *:first-child::after { content: ''; font-size: 16px; word-break: break-word; position: absolute; transform-style: preserve-3d; } #workskin .cuboid { height: 96px; } #workskin .cuboid::before, #workskin .cuboid > *:first-child { width: 86px; } #workskin .cuboid, #workskin .cuboid > *:first-child::before { width: 76px; } #workskin .cuboid::after, #workskin .cuboid > *:first-child::after { height: 86px; } #workskin .cuboid, #workskin .cuboid > *:first-child::after { width: 76px; } #workskin .cuboid::before { content: 'Left Side Face'; left: 0; top: 0; bottom: 0; background: yellow; transform-origin: left center; transform: rotateY(-90deg) translateX(-100%); } #workskin .cuboid::after { content: 'Bottom Face'; background: cornflowerblue; transform-origin: left bottom; transform: rotateX(-90deg) translateY(100%); right: 0; left: 0; bottom: 0; } #workskin .cuboid > *:first-child { right: 0; top: 0; bottom: 0; background: yellow; transform-origin: right; transform: rotateY(90deg) translate(100%); } #workskin .cuboid > *:first-child::before { content: 'Back Face'; right: 0; top: 0; bottom: 0; background: blue; transform: rotateY(90deg) translateX(100%); transform-origin: right center; } #workskin .cuboid > *:first-child::after { content: 'Top Face'; right: 0; top: 0; background: pink; transform: rotateX(90deg) rotate(90deg); transform-origin: top right; } #workskin .kyuboid { position: relative; width: 96px; height: 96px; } #workskin .kyuboid > [class|='fc'] { position: absolute; } #workskin .kyuboid, #workskin .kyuboid > [class|='fc'] { margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; } #workskin .kyuboid > .fc-front { transform-origin: bottom; background: red; width: 96px; height: 96px; } #workskin .kyuboid > .fc-back { transform: rotateY(180deg); background: orange; width: 96px; height: 96px; transform-origin: center bottom -48px; } #workskin .kyuboid > .fc-left { transform: rotateY(-90deg) translateX(-100%); transform-origin: left; background: blue; height: 96px; width: 96px; } #workskin .kyuboid > .fc-right { transform: rotateY(90deg) translateX(100%); transform-origin: right; background: green; height: 96px; width: 96px; } #workskin .kyuboid > .fc-top { transform: rotateX(90deg) translateY(-100%); transform-origin: top; background: indigo; width: 96px; height: 96px; } #workskin .kyuboid > .fc-bottom { transform: rotateX(-90deg) translateY(100%); transform-origin: bottom; background: pink; width: 96px; height: 96px; }
Decorations
#workskin .model-station .controls { border: #f29cbb; border-width: .5em .2em; border-style: double none; outline: .2em solid #f29cbb !important; border-radius: .3em; margin: 1em auto; } #workskin .model-station .controls [class|='adjust'] { border: .5em #f29cbb; border-style: none solid; outline: .2em solid #f29cbb !important; border-radius: .3em; } #workskin .model-station .controls > dl:has(dd dl) > dt { text-decoration-thickness: .2em; text-decoration-color: #f29cbb; } #workskin .model-station .controls :is(.nav, [class|='adjust']) { margin: .5em; } #workskin .model-station .controls .nav li:active { border-color: #9cd2f2; } #workskin .model-station .viewer { border: .5em #f29cbb !important; border-style: solid none !important; background-image: repeating-linear-gradient(-135deg, rgba(242, 156, 187, 0.05), rgba(242, 156, 187, 0.05) 11%, rgba(196, 106, 137, 0.6) 11%, rgba(196, 106, 137, 0.6) 12%, rgba(242, 156, 187, 0.05) 12%, rgba(242, 156, 187, 0.05) 13%, rgba(196, 106, 137, 0.6) 13%, rgba(196, 106, 137, 0.6) 26%, transparent 26%, transparent 26.5%, rgba(196, 106, 137, 0.6) 26.5%, rgba(196, 106, 137, 0.6) 27%, transparent 27%, transparent 33%); outline: .2em solid #f29cbb !important; border-radius: .3em; } #workskin .model-station .controls .nav { border: .2em solid #f29cbb !important; border-radius: .3em; } #workskin .model-station .controls .nav li { border: .2em solid #f29cbb; border-bottom-width: .3em; border-radius: .3em; } #workskin .model-station .controls :is(.adjust, .settings, [class|='adjust']) li:has([open]) { border-color: #9cd2f2; } #workskin .model-station .controls :is(.adjust, .settings, [class|='adjust']) summary::before { color: #f29cb2; font-weight: 900; } #workskin .model-station .controls :is(.adjust, .settings, [class|='adjust']) [open] summary::before { color: #9cd2f2; } #workskin .model-station:has(.controls .settings .outline[open]) .viewer *:not(> .hide), #workskin .model-station:has(.controls .settings .outline[open]) .viewer *:not(> .hide)::before, #workskin .model-station:has(.controls .settings .outline[open]) .viewer *:not(> .hide)::after { outline-color: #c46a89 !important; }
Click here for the HTML
<div class="model-station"> <div class="controls hidden toc-heading"> <!-- .toc-heading is for hiding things in downloaded, very useful --> <dl class="nav model-switch"><dt>Model Switch</dt><dd><ul> <!-- if you want to use 1 model, just use .hide for this, don't remove it at all --> <li><a href="#model-1">Cuboid</a></li> <li><a href="#model-2">Quboid</a></li> <li><a href="#model-3">Kyuboid</a></li></ul></dd></dl> <dl class="nav adjust"><dt>Adjust</dt><dd><ul> <li><details class="model" open="open"><summary>Model</summary><p>A:M:CHCK</p></details></li> <li><details class="elements"><summary>Elements</summary><p>A:E:CHCK</p></details> <!-- this is completely optional, you can remove it along with adjust-element --> </li></ul></dd></dl> <dl class="nav settings"><dt>Settings</dt><dd><ul> <!-- optional --> <li><details class="outline"><summary>Outline Everything In Viewer</summary><p>S:O:CHCK</p></details></li> <li><details class="overflowshow"><summary>Viewer Overflow Show</summary><p>S:V:CHCK</p></details></li></ul></dd></dl> </div> <div class="viewer hidden toc-heading"> <div class="mv-y"><div class="mv-x"><div class="rt-z"><div class="rt-y"><div class="rt-x"><div class="sc-y"><div class="sc-x"><div class="sc-xy"><div class="sk-y"><div class="sk-x"><div class="sk-xy"> <div class="model-1"><p class="hide"><a name="model-1"></a></p> <!-- if you're going to add more models don't forget this --> <ul class="quboid"> <li class="fc-front">front face</li> <li class="fc-back">back face</li> <li class="fc-left">left face</li> <li class="fc-right">right face</li> <li class="fc-top">top face</li> <li class="fc-bottom">bottom face</li> </ul> </div> <div class="model-2"><p class="hide"><a name="model-2"></a></p> <p class="cuboid"><span>Right Side Face</span>Front Face</p> </div> <div class="model-3"><p class="hide"><a name="model-3"></a></p> <ul class="kyuboid"> <li class="fc-front">front face</li> <li class="fc-back">back face</li> <li class="fc-left">left face</li> <li class="fc-right">right face</li> <li class="fc-top">top face</li> <li class="fc-bottom">bottom face</li> </ul> </div> </div></div></div></div></div></div></div></div></div></div></div> </div> <div class="controls hidden toc-heading"> <dl class="adjust-model"><dt>Model</dt><dd> <dl class="nav"><dt>Adjust Speed</dt><dd><ul> <li class="speed-slow"><details><summary>Slow</summary><p>S:AS:S:CHCK</p></details></li> <li class="speed-medium"><details><summary>Medium</summary><p>S:AS:M:CHCK</p></details></li> <li class="speed-fast"><details><summary>Fast</summary><p>S:AS:F:CHCK</p></details></li> <li class="speed-superfast"><details><summary>Superfast</summary><p>S:AS:SF:CHCK</p></details></li></ul></dd></dl> <dl class="nav"><dt>Rotate</dt><dd><ul> <li class="rotate-left">←</li> <li class="rotate-right">→</li> <li class="rotate-up">↑</li> <li class="rotate-down">↓</li> <li class="rotate-zup">↺</li> <li class="rotate-zown">↻</li></ul></dd></dl> <dl class="nav"><dt>Move</dt><dd><ul> <li class="move-left">←</li> <li class="move-right">→</li> <li class="move-up">↑</li> <li class="move-down">↓</li></ul></dd></dl> <dl class="nav"><dt>Scale</dt><dd><ul> <li class="scale-up-horizontal">↦</li> <li class="scale-up-vertical">↧</li> <li class="scale-down-horizontal">↤</li> <li class="scale-down-vertical">↥</li> <li class="scale-up">⇲</li> <li class="scale-down">⇱</li></ul></dd></dl> <dl class="nav"><dt>Skew</dt><dd><ul> <li class="skew-up-horizontal">⥛</li> <li class="skew-up-vertical">⥝</li> <li class="skew-down-horizontal">⥚</li> <li class="skew-down-vertical">⥜</li> <li class="skew-up">⤩</li> <li class="skew-down">⤧</li></ul></dd></dl> </dd></dl> <dl class="adjust-elements"> <!-- optional --> <dt>Elements</dt><dd> <dl class="nav"><dt>Adjust Speed</dt><dd><ul> <li class="speed-slow"><details><summary>Slow</summary><p>E:AS:S:CHCK</p></details></li> <li class="speed-medium"><details><summary>Medium</summary><p>E:AS:M:CHCK</p></details></li> <li class="speed-fast"><details><summary>Fast</summary><p>E:AS:F:CHCK</p></details></li> <li class="speed-superfast"><details><summary>Superfast</summary><p>E:AS:SF:CHCK</p></details></li></ul></dd></dl> <dl class="nav"><dt>Rotate</dt><dd><ul> <li class="rotate-left"><details><summary>←</summary><p>E:R:L:CHCK</p></details></li> <li class="rotate-right"><details><summary>→</summary><p>E:R:R:CHCK</p></details></li> <li class="rotate-up"><details><summary>↑</summary><p>E:R:U:CHCK</p></details></li> <li class="rotate-down"><details><summary>↓</summary><p>E:R:D:CHCK</p></details></li> <li class="rotate-zup"><details><summary>↺</summary><p>E:R:ZU:CHCK</p></details></li> <li class="rotate-zown"><details><summary>↻</summary><p>E:R:ZO:CHCK</p></details></li></ul></dd></dl> <dl class="nav"><dt>Move</dt><dd><ul> <li class="move-left"><details><summary>←</summary><p>E:M:L:CHCK</p></details></li> <li class="move-right"><details><summary>→</summary><p>E:M:R:CHCK</p></details></li> <li class="move-up"><details><summary>↑</summary><p>E:M:U:CHCK</p></details></li> <li class="move-down"><details><summary>↓</summary><p>E:M:D:CHCK</p></details></li></ul></dd></dl> <dl class="nav"><dt>Scale</dt><dd><ul> <li class="scale-up-horizontal"><details><summary>↦</summary><p>E:SC:UH:CHCK</p></details></li> <li class="scale-up-vertical"><details><summary>↧</summary><p>E:SC:UV:CHCK</p></details></li> <li class="scale-down-horizontal"><details><summary>↤</summary><p>E:SC:DH:CHCK</p></details></li> <li class="scale-down-vertical"><details><summary>↥</summary><p>E:SC:DV:CHCK</p></details></li> <li class="scale-up"><details><summary>⇲</summary><p>E:SC:SU:CHCK</p></details></li> <li class="scale-down"><details><summary>⇱</summary><p>E:SC:SD:CHCK</p></details></li></ul></dd></dl> <dl class="nav"><dt>Skew</dt><dd><ul> <li class="skew-up-horizontal"><details><summary>⥛</summary><p>E:SK:UH:CHCK</p></details></li> <li class="skew-up-vertical"><details><summary>⥝</summary><p>E:SK:UV:CHCK</p></details></li> <li class="skew-down-horizontal"><details><summary>⥚</summary><p>E:SK:DH:CHCK</p></details></li> <li class="skew-down-vertical"><details><summary>⥜</summary><p>E:SK:DV:CHCK</p></details></li> <li class="skew-up"><details><summary>⤩</summary><p>E:SK:U:CHCK</p></details></li> <li class="skew-down"><details><summary>⤧</summary><p>E:SK:D:CHCK</p></details></li></ul></dd></dl> </dd></dl> </div> <div class="hide"> <div class="caution"><p>Put a warning here or images or anything else to inform the readers.</p></div> </div> </div>
End:
Wow, that was hard to write, is this how writers feel? Anyway, this is like my first ever legit tutorial so don't be too hard on me okay? Alright, goodbye and goodluck on whatever your making, even if it's not related to fanfiction (^v^).