Skip to content

Instantly share code, notes, and snippets.

@josephmcasey

josephmcasey/3d.html

Created December 16, 2017 00:17
Show Gist options
  • Save josephmcasey/166e5d16022135ef0090a7424288fb60 to your computer and use it in GitHub Desktop.
Save josephmcasey/166e5d16022135ef0090a7424288fb60 to your computer and use it in GitHub Desktop.
Download ZIP
3D Letters
Raw
3d.html
<div id="container">
<div id="cube-j" class="animate">
<!--0-->
<div id="p-2x-2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p-2x-1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p-2x0">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p-2x1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p-2x2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!--5-->
<div id="p2x-2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p2x-1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p2x0">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p2x1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p2x2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!--10-->
<div id="p-1x-2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p-1x-1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p-1x0">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p-1x1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p-1x2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!--15-->
<div id="p1x-2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p1x-1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p1x-0">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p1x-1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p1x-2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!--20-->
<div id="p0x-2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p0x-1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p0x0">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p0x1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="p0x2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!--25-->
</div>
</div>
Raw
3d.less
@gradient: 135deg, #185198 0, #34ac94 50%, #c63215 100%;
@rxy0:rotateX(-180deg) rotateY(-180deg);
@rxy180:rotateX(180deg) rotateY(180deg);
@cubesize:15px;
@zaxis: translateZ(@cubesize/2);
@top:rotateY(90deg);
@bottom:rotateY(-90deg);
@back:rotateY(180deg);
@left:rotateX(-90deg);
@right:rotateX(90deg);
/* Due to centering in position 3,3 the z-index must be moved have the size of a cube side */
@keyframes spinningH {
from {
-moz-transform: @rxy180;
-ms-transform: @rxy180;
-o-transform: @rxy180;
-webkit-transform: @rxy180;
transform: @rxy180;
}
to {
-moz-transform: @rxy0;
-ms-transform: @rxy0;
-o-transform: @rxy0;
-webkit-transform: @rxy0;
transform: @rxy0;
}
}
#container {
perspective: 100px;
perspective-origin: 50% 50%;
transform-origin: 50% 50%;
}
.animate {
animation: spinningH 20s infinite linear;
}
#cube {
position: relative;
margin: 0 auto;
height: @cubesize;
width: @cubesize;
margin-top: 25px;
transition : transform 2s linear;
-webkit-transform-style : preserve-3d;
transform-style : preserve-3d;
}
#cube-side {
position: absolute;
height: @cubesize;
width: @cubesize;
padding: -2px;
opacity: 0.4;
background-image: linear-gradient(@gradient);
}
.create-cubes(-2, 2);
.create-cubes(@min, @max) {
.i; .i(@i: @min) when (@i <= @max) {
.j; .i(@i + 1);
}
.j(@j: @min) when (@j <= @max) {
#p@{i}x@{j}:extend(#cube-side) {}
.j(@j + 1);
}
}
/* TODO: Hide certain coordinate cubes based on their parents class, i.e. cube-k would need to hide the coordiante 1,2 */
.coordinates(-2, 2);
.coordinates(@min, @max) {
.xcoor; .xcoor(@xcoor: @min) when (@xcoor <= @max) {
.ycoor; .xcoor(@xcoor + 1);
}
.ycoor(@ycoor: @min) when (@ycoor <= @max) {
@ytrans:translatey(@cubesize * @ycoor);
@xtrans:translatex(@cubesize * @xcoor);
#p@{xcoor}x@{ycoor} div:nth-child(1) {
transform: @zaxis @ytrans @xtrans;
background-image: linear-gradient(@gradient);
}
#p@{xcoor}x@{ycoor} div:nth-child(2) {
transform: @top @zaxis @ytrans @xtrans;
background-image: linear-gradient(@gradient);
}
#p@{xcoor}x@{ycoor} div:nth-child(3) {
transform: @back @zaxis @ytrans @xtrans;
background-image: linear-gradient(@gradient);
}
#p@{xcoor}x@{ycoor} div:nth-child(4) {
transform: @bottom @zaxis @ytrans @xtrans;
background-image: linear-gradient(@gradient);
}
#p@{xcoor}x@{ycoor} div:nth-child(5) {
transform: @left @zaxis @ytrans @xtrans;
background-image: linear-gradient(@gradient);
}
#p@{xcoor}x@{ycoor} div:nth-child(6) {
transform: @right @zaxis @ytrans @xtrans;
background-image: linear-gradient(@gradient);
}
.ycoor(@ycoor + 1);
}
}
/* Using master ID to determine which child cubes to hide. */
Raw
README.md

Instructions

Made of less and html strictly. Creates a letter of your choice. Simply modifying the container <div class="cube-A">s class from cube-A to Cube-B would result in the coordinates on table 1 disappearing then revealing the results in table 2.

Illustration

The lettering is always built out using 5x5 squares, showing only what the parent div allows.

  • | Column 1 | Column 2 | Column 3 | Column 4 | Column 5 --- | --- | --- | --- | --- | --- Row 1 | A | A | A | A | A Row 2 | A | X | X | X | A Row 3 | A | A | A | A | A Row 4 | A | X | X | X | A Row 5 | A | X | X | X | A

  • | Column 1 | Column 2 | Column 3 | Column 4 | Column 5 --- | --- | --- | --- | --- | --- Row 1 | B | B | B | B | X Row 2 | B | X | X | B | X Row 3 | B | B | B | B | B Row 4 | B | X | X | X | B Row 5 | B | B | B | B | B

etc.

#To Do List

Build out the LESS parent divs hiding particular plot points. cube-A, cube-B, etc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment