Prismify

Make CSS-powered 3D "prisms" of text, , , and anything else with this library and some CSS/JS glue!

Setup

Manually

Load the needed CSS and import the JS package from a CDN or a local copy.

<head>
  ...
  <link rel="stylesheet" href="https://unpkg.com/prismify@1.0.0/prismify.css">
</head>
<body>
  ...
  <script>
    import { prismifyOnPage } from "https://unpkg.com/prismify@1.0.0/prismify.js"
    prismifyOnPage()
  </script>
</body>

Bundlers

Install the prismify package.
Most bundlers which output HTML should support requiring CSS like so:

import "prismify/prismify.css"
import { prismifyOnPage } from "prismify"
prismifyOnPage()

Examples

<div class="prismify fun-text">Hello</div>

.fun-text > * {
  font-size: 5em;
  transform: rotateY(-30deg) rotateX(10deg) var(--z-transform);
  color: hsl(0deg calc(var(--index) * 100%) 50%);
}

Hello

.fun-text > * {
  font-size: 5em;
  animation: 4s ease-in-out infinite alternate prismify-rotate;
  --x-rotation-amount: 180deg;
  --z-offset: -0.5em;
  color: hsl(calc(160deg + var(--index) * 40deg) 80% 50%);
}

Hello

.fun-text {
  --layer-count: 5;
}
.fun-text > * {
  font-size: 5em;
  transform: rotateX(70deg) var(--z-transform);
  --prism-depth: 0.5em;
  color: hsl(calc(var(--index) * 360deg) 100% 50%);
}

Hello

@keyframes fun-extend {
  0% {
    transform: rotateX(calc(var(--index) * -45deg))
      rotateY(calc(var(--index) * -45deg)) var(--z-transform);
  }
  50% {
    transform: rotateX(0deg) rotateY(0deg) var(--z-transform);
  }
  100% {
    transform: rotateX(calc(var(--index) * -45deg))
      rotateY(calc(var(--index) * 45deg)) var(--z-transform);
  }
}
.fun-text > * {
  font-size: 5em;
  animation: 2s linear infinite alternate fun-extend;
  color: hsl(0deg 0% calc(var(--index) * 100%));
}

Hello

If you want more examples, look at the source code for the prisms at the top (and bottom) of this page!

Usage

JS

Just loading the CSS and JS doesn't do anything. To prismify elements, a function must be called:

prismifyOnPage() prismifies all elements in the document which have the "prismify" class.
prismifyElement(el) prismifies one given element.

Layers

<div class="prismify">Hello</div>

Hello

A prismified element is just an element whose child element has been copies multiple times (each copy is called a "layer") and assigned an --index. Index goes from 1 to 0, where the first and closest element has the index of 1, and the last element has an index of 0. (Not really; it's actually 1 / layerCount).

CSS Variable Customization

There are multiple CSS variables which control various aspects of the prism looks.

--layer-count controls the amount of layers created. Must be set on the base prismify element, not on its children. Default: 50
--z-offset - all layers will be offset by this amount. Default: 0.1em
--prism-depth - the distance between the first and last layer. Default: 1em
--x-rotate-amount, --y-rotate-amount - offset amount for the built-in prismify-rotate animation.

Animations

Prismify has a built-in animation called prismify-rotate. It rotates the prism layers by the Y and X axes. The degrees to rotate must be set with the X and Y rotate amount CSS variables.

Animations shouldn't be applied to a base prismify element, but to its children.

Custom animations working with prismify prisms should always add var(--z-transform) at the end of all transform properties to correctly set the layers' position on the Z axis.

Adding the class fun-mode to a base prismify element enables "fun mode", where layers with a lesser index always appear before later layers, even if they shouldn't. This effectively reverses display order.

Credits

Made by G lander (glander.club).