6+ JavaScript 3D Text Effect Examples

This post contains a total of 6+ JavaScript 3D Text Effect Examples with Source Code. All these 3D Text Effects are made using JavaScript & Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript 3D Text Effect Examples

1. 3D Text Mouse effect

Made by Louis Hoebregts. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
path {
  fill: none;
  stroke: black;
  stroke-width: 1px;
}

svg {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  outline: 1px solid black;
}

canvas {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  margin: auto;
  touch-action: none;
}

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  align-items: flex-start;
  margin: 0;
  background: black;
}
</style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000"><path d="M101.85 141.28h74.46L206.4 243.4l34.34-102.73h61.39l34.34 102.73 30.09-102.12h73.25l-69.6 214.27h-62l-37.38-105.77-37.38 105.77h-62l-69.6-214.27z"/><path d="M451.98 141.28h71.12v75.07h65.04v-75.07h71.12v212.75h-71.12v-76.29H523.1v76.29h-71.12V141.28z"/><path d="M746.79 278.66l-80.24-137.37h79.63l36.47 69.9 36.77-69.9h78.72L817.9 277.75v76.29h-71.12v-75.38z"/><g><path d="M360.62 590.72l23.7-28.26c14.41 11 30.91 15.55 46.46 15.55 7.96 0 11.38-2.09 11.38-5.69v-.38c0-3.79-4.17-5.88-18.39-8.72-29.77-6.07-55.94-14.6-55.94-42.67v-.38c0-25.22 19.72-44.75 56.32-44.75 25.6 0 44.56 6.07 59.92 18.2l-21.62 29.96c-12.52-9.1-27.5-13.08-39.82-13.08-6.64 0-9.67 2.28-9.67 5.5v.38c0 3.6 3.6 5.88 17.64 8.53 33.94 6.26 56.7 16.12 56.7 42.86v.38c0 27.88-22.95 44.94-58.6 44.94-26.93.01-51.2-7.58-68.08-22.37z"/><path d="M494.5 544.64v-.38c0-38.5 31.67-69.22 72.63-69.22 40.96 0 72.25 30.34 72.25 68.84v.38c0 38.5-31.67 69.22-72.63 69.22-40.96 0-72.25-30.34-72.25-68.84z"/><path d="M594.63 544.64v-.38c0-15.74-10.81-29.96-27.88-29.96-16.88 0-27.5 14.03-27.5 29.58v.38c0 15.74 10.81 29.96 27.88 29.96 16.88 0 27.5-14.03 27.5-29.58z"/></g><g><path d="M87 825.31l19.12-22.79c11.63 8.87 24.93 12.54 37.48 12.54 6.42 0 9.18-1.68 9.18-4.59v-.31c0-3.06-3.37-4.74-14.84-7.04-24.02-4.89-45.12-11.78-45.12-34.42v-.31c0-20.34 15.91-36.1 45.43-36.1 20.65 0 35.95 4.89 48.34 14.68l-17.44 24.17c-10.1-7.34-22.18-10.55-32.12-10.55-5.35 0-7.8 1.84-7.8 4.44v.31c0 2.91 2.91 4.74 14.23 6.88 27.38 5.05 45.74 13 45.74 34.57v.31c0 22.49-18.51 36.25-47.27 36.25-21.74.01-41.32-6.1-54.93-18.04z"/><path d="M197.44 734.3h91.32v29.37h-56.14v10.86h52.31v25.85h-52.31v11.63h56.9v29.37h-92.09V734.3z"/><path d="M299.16 734.3h52.31c18.97 0 31.05 4.74 38.55 12.24 6.42 6.42 9.79 14.38 9.79 25.39v.31c0 15.6-8.11 26.46-21.11 32.74l24.93 36.41h-40.84L342.6 810.8h-7.65v30.59h-35.79V734.3z"/><path d="M350.4 785.24c8.57 0 13.77-3.82 13.77-10.4v-.31c0-6.88-5.35-10.25-13.61-10.25h-15.6v20.96h15.44z"/><path d="M408.83 734.3h35.79v107.08h-35.79V734.3z"/><path d="M454.72 788.14v-.31c0-31.05 25.55-55.83 58.59-55.83 33.04 0 58.28 24.48 58.28 55.53v.31c0 31.05-25.54 55.83-58.59 55.83-33.04 0-58.28-24.47-58.28-55.53z"/><path d="M535.49 788.14v-.31c0-12.7-8.72-24.17-22.49-24.17-13.61 0-22.18 11.32-22.18 23.86v.31c0 12.7 8.72 24.17 22.49 24.17 13.61.01 22.18-11.31 22.18-23.86z"/><path d="M580.46 793.34V734.3h36.41v58.59c0 13.31 6.88 18.97 16.52 18.97s16.52-5.2 16.52-18.2V734.3h36.41v58.28c0 36.56-21.26 50.94-53.23 50.94-31.98 0-52.63-14.69-52.63-50.18z"/><path d="M688.75 825.31l19.12-22.79c11.63 8.87 24.93 12.54 37.48 12.54 6.43 0 9.18-1.68 9.18-4.59v-.31c0-3.06-3.37-4.74-14.84-7.04-24.02-4.89-45.13-11.78-45.13-34.42v-.31c0-20.34 15.91-36.1 45.43-36.1 20.65 0 35.95 4.89 48.34 14.68l-17.44 24.17c-10.1-7.34-22.18-10.55-32.12-10.55-5.35 0-7.8 1.84-7.8 4.44v.31c0 2.91 2.91 4.74 14.23 6.88 27.38 5.05 45.74 13 45.74 34.57v.31c0 22.49-18.51 36.25-47.27 36.25-21.72.01-41.3-6.1-54.92-18.04z"/><path d="M856.1 781.57l1.84-1.84c16.21-2.14 21.26-5.66 21.26-10.55v-.15c0-3.52-3.21-5.97-9.02-5.97s-14.23 3.82-21.72 9.64l-16.52-24.78c9.79-8.72 23.25-15.45 41.76-15.45 22.79 0 39.31 12.85 39.31 32.43v.31c0 19.12-12.08 27.53-29.52 32.58l-1.84 10.25h-21.26l-4.29-26.47zm-3.37 32.27h35.49v27.53h-35.49v-27.53z"/></g></svg>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js'></script>
      <script>
console.clear();

const largePaths = document.querySelectorAll("path");
const smallPaths = [];
const svg_width = Math.ceil(
parseFloat(document.querySelector("svg").viewBox.baseVal.width));

const svg_height = Math.ceil(
parseFloat(document.querySelector("svg").viewBox.baseVal.height));

const scale = 0.7;
const detail = 8;
const offset = [0, 0];
let bigCoords = [];
let smallCoords = [];
let ratio = 1;
let context;

function setupHTMLOnce() {
  largePaths.forEach(path => {
    let bbox = path.getBBox();
    let _path = path.cloneNode();
    path.viewportElement.appendChild(_path);
    path.bbox = path.getBBox();
    _path.bbox = _path.getBBox();
    path.length = path.getTotalLength();
    _path.length = _path.getTotalLength();
    smallPaths.push(_path);
  });
}

function updateHTML() {
  largePaths.forEach((path, i) => {
    let _path = smallPaths[i];
    const cx = path.bbox.x + path.bbox.width / 2;
    const cy = path.bbox.y + path.bbox.height / 2;
    path.cx = cx;
    path.cy = cy;
    let _scale = scale;
    _path.setAttribute(
    "transform",
    `matrix(${_scale}, 0, 0, ${_scale}, ${cx - _scale * cx}, ${
    cy - _scale * cy
    })`);


    let localMatrix = path.viewportElement.createSVGMatrix();
    let localTransformList = path.transform.baseVal;
    if (localTransformList.length) {
      localMatrix = localTransformList.consolidate().matrix;
    }
    path.matrix = localMatrix;

    localMatrix = _path.viewportElement.createSVGMatrix();
    localTransformList = _path.transform.baseVal;
    if (localTransformList.length) {
      localMatrix = localTransformList.consolidate().matrix;
    }
    _path.matrix = localMatrix;
  });
  bigCoords = [];

  largePaths.forEach(path => {
    const coords = [];
    for (let i = 0; i < path.length + detail; i += detail) {if (window.CP.shouldStopExecution(0)) break;
      let p = path.getPointAtLength((path.length - i) % path.length);
      let transformedPoint = p.matrixTransform(path.matrix);
      coords.push([transformedPoint.x, transformedPoint.y]);
    }window.CP.exitedLoop(0);
    bigCoords.push(coords);
  });

  smallPaths.forEach((path, i) => {
    const coords = [];
    for (let j = 0; j < path.length + detail; j += detail) {if (window.CP.shouldStopExecution(1)) break;
      let p = path.getPointAtLength((path.length - j) % path.length);
      let transformedPoint = p.matrixTransform(path.matrix);
      coords.push([transformedPoint.x, transformedPoint.y]);
    }window.CP.exitedLoop(1);
    smallCoords[i] = coords;
  });
}

function setup() {
  const size = min(windowWidth, windowHeight);
  const _width = size;
  const _height = _width * (svg_height / svg_width);
  ratio = _width / svg_width;
  const canvas = createCanvas(ceil(_width), ceil(_height));
  context = canvas.drawingContext;
  noFill();
  setupHTMLOnce();
  updateHTML();
  context.lineWidth = 2;
  context.strokeStyle = "white";
  context.lineJoin = 'round';
  context.lineCap = 'round';
  mouseX = width / 2;
  mouseY = height;
}
function windowResized() {
  const size = min(windowWidth, windowHeight);
  const _width = size;
  const _height = _width * (svg_height / svg_width);
  ratio = _width / svg_width;
  resizeCanvas(ceil(_width), ceil(_height));
}
function draw() {
  clear();
  bigCoords.forEach((path, i) => {
    context.lineWidth = 2;
    context.strokeStyle = 'rgba(255, 255, 255, 1)';
    // Draw big path
    context.beginPath();
    path.forEach((coord, j) => {
      context.lineTo(coord[0] * ratio, coord[1] * ratio);
    });
    context.stroke();
    context.closePath();

    // Draw small path
    context.beginPath();
    path.forEach((coord, j) => {
      const dist = Math.hypot(largePaths[i].cx * ratio - mouseX, largePaths[i].cy * ratio - mouseY);
      const offsetX = (largePaths[i].cx * ratio - mouseX) * (dist * 0.0001);
      const offsetY = (largePaths[i].cy * ratio - mouseY) * (dist * 0.0001);
      context.lineTo(
      smallCoords[i][j][0] * ratio + offsetX,
      smallCoords[i][j][1] * ratio + offsetY);

    });
    context.stroke();
    context.closePath();

    context.lineWidth = 1;
    context.strokeStyle = 'rgba(255, 255, 255, 0.7)';
    // Connect paths
    path.forEach((coord, j) => {
      context.beginPath();
      context.moveTo(coord[0] * ratio, coord[1] * ratio);
      const dist = Math.hypot(largePaths[i].cx * ratio - mouseX, largePaths[i].cy * ratio - mouseY);
      const offsetX = (largePaths[i].cx * ratio - mouseX) * (dist * 0.0001);
      const offsetY = (largePaths[i].cy * ratio - mouseY) * (dist * 0.0001);
      context.lineTo(
      smallCoords[i][j][0] * ratio + offsetX,
      smallCoords[i][j][1] * ratio + offsetY);

      context.stroke();
      context.closePath();
    });
  });
}
    </script>
</body>
</html>

2. Onion 3D text

Made by Fabio Ottaviani. Source

Onion 3D Text
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:900'>
<style>
html, body {
  height: 100vh;
}

body {
  background: #010101;
}

.text {
  color: #010101;
  font-size: 80px;
  font-family: Montserrat, serif;
  font-weight: 900;
  position: relative;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 500px;
  text-align: center;
}
.text span {
  position: absolute;
  text-shadow: 1px 1px 0 #f0c, 0 1px 0 #f0c, -1px 1px 0 #f0c, -1px 0 0 #f0c, -1px -1px 0 #f0c, 0 -1px 0 #f0c, 1px -1px 0 #f0c;
}
.text span:nth-child(1) {
  transform: perspective(1600px) rotateY(39deg) rotateX(53deg) translateZ(-25px) scale(1.2);
  z-index: 9;
  text-shadow: 1px 1px 0 #ff00bf, 0 1px 0 #ff00bf, -1px 1px 0 #ff00bf, -1px 0 0 #ff00bf, -1px -1px 0 #ff00bf, 0 -1px 0 #ff00bf, 1px -1px 0 #ff00bf, -20px 20px 20px rgba(0, 0, 0, 0.9);
}
.text span:nth-child(2) {
  transform: perspective(1600px) rotateY(43deg) rotateX(56deg) translateZ(-50px) scale(1.4);
  z-index: 8;
  text-shadow: 1px 1px 0 #ff00b3, 0 1px 0 #ff00b3, -1px 1px 0 #ff00b3, -1px 0 0 #ff00b3, -1px -1px 0 #ff00b3, 0 -1px 0 #ff00b3, 1px -1px 0 #ff00b3, -20px 20px 20px rgba(0, 0, 0, 0.9);
}
.text span:nth-child(3) {
  transform: perspective(1600px) rotateY(47deg) rotateX(59deg) translateZ(-75px) scale(1.6);
  z-index: 7;
  text-shadow: 1px 1px 0 #ff00a6, 0 1px 0 #ff00a6, -1px 1px 0 #ff00a6, -1px 0 0 #ff00a6, -1px -1px 0 #ff00a6, 0 -1px 0 #ff00a6, 1px -1px 0 #ff00a6, -20px 20px 20px rgba(0, 0, 0, 0.9);
}
.text span:nth-child(4) {
  transform: perspective(1600px) rotateY(51deg) rotateX(62deg) translateZ(-100px) scale(1.8);
  z-index: 6;
  text-shadow: 1px 1px 0 #ff0099, 0 1px 0 #ff0099, -1px 1px 0 #ff0099, -1px 0 0 #ff0099, -1px -1px 0 #ff0099, 0 -1px 0 #ff0099, 1px -1px 0 #ff0099, -20px 20px 20px rgba(0, 0, 0, 0.9);
}
.text span:nth-child(5) {
  transform: perspective(1600px) rotateY(55deg) rotateX(65deg) translateZ(-125px) scale(2);
  z-index: 5;
  text-shadow: 1px 1px 0 #ff008c, 0 1px 0 #ff008c, -1px 1px 0 #ff008c, -1px 0 0 #ff008c, -1px -1px 0 #ff008c, 0 -1px 0 #ff008c, 1px -1px 0 #ff008c, -20px 20px 20px rgba(0, 0, 0, 0.9);
}
.text span:nth-child(6) {
  transform: perspective(1600px) rotateY(59deg) rotateX(68deg) translateZ(-150px) scale(2.2);
  z-index: 4;
  text-shadow: 1px 1px 0 rgba(255, 0, 128, 0.9), 0 1px 0 rgba(255, 0, 128, 0.9), -1px 1px 0 rgba(255, 0, 128, 0.9), -1px 0 0 rgba(255, 0, 128, 0.9), -1px -1px 0 rgba(255, 0, 128, 0.9), 0 -1px 0 rgba(255, 0, 128, 0.9), 1px -1px 0 rgba(255, 0, 128, 0.9), -20px 20px 20px rgba(0, 0, 0, 0.9);
}
.text span:nth-child(7) {
  transform: perspective(1600px) rotateY(63deg) rotateX(71deg) translateZ(-175px) scale(2.4);
  z-index: 3;
  text-shadow: 1px 1px 0 rgba(255, 0, 115, 0.75), 0 1px 0 rgba(255, 0, 115, 0.75), -1px 1px 0 rgba(255, 0, 115, 0.75), -1px 0 0 rgba(255, 0, 115, 0.75), -1px -1px 0 rgba(255, 0, 115, 0.75), 0 -1px 0 rgba(255, 0, 115, 0.75), 1px -1px 0 rgba(255, 0, 115, 0.75), -20px 20px 20px rgba(0, 0, 0, 0.9);
}
.text span:nth-child(8) {
  transform: perspective(1600px) rotateY(67deg) rotateX(74deg) translateZ(-200px) scale(2.6);
  z-index: 2;
  text-shadow: 1px 1px 0 rgba(255, 0, 102, 0.6), 0 1px 0 rgba(255, 0, 102, 0.6), -1px 1px 0 rgba(255, 0, 102, 0.6), -1px 0 0 rgba(255, 0, 102, 0.6), -1px -1px 0 rgba(255, 0, 102, 0.6), 0 -1px 0 rgba(255, 0, 102, 0.6), 1px -1px 0 rgba(255, 0, 102, 0.6), -20px 20px 20px rgba(0, 0, 0, 0.9);
}
.text span:nth-child(9) {
  transform: perspective(1600px) rotateY(71deg) rotateX(77deg) translateZ(-225px) scale(2.8);
  z-index: 1;
  text-shadow: 1px 1px 0 rgba(255, 0, 89, 0.45), 0 1px 0 rgba(255, 0, 89, 0.45), -1px 1px 0 rgba(255, 0, 89, 0.45), -1px 0 0 rgba(255, 0, 89, 0.45), -1px -1px 0 rgba(255, 0, 89, 0.45), 0 -1px 0 rgba(255, 0, 89, 0.45), 1px -1px 0 rgba(255, 0, 89, 0.45), -20px 20px 20px rgba(0, 0, 0, 0.9);
}
.text span:nth-child(10) {
  transform: perspective(1600px) rotateY(75deg) rotateX(80deg) translateZ(-250px) scale(3);
  z-index: 0;
  text-shadow: 1px 1px 0 rgba(255, 0, 77, 0.3), 0 1px 0 rgba(255, 0, 77, 0.3), -1px 1px 0 rgba(255, 0, 77, 0.3), -1px 0 0 rgba(255, 0, 77, 0.3), -1px -1px 0 rgba(255, 0, 77, 0.3), 0 -1px 0 rgba(255, 0, 77, 0.3), 1px -1px 0 rgba(255, 0, 77, 0.3), -20px 20px 20px rgba(0, 0, 0, 0.9);
}
.text span:nth-child(11) {
  transform: perspective(1600px) rotateY(79deg) rotateX(83deg) translateZ(-275px) scale(3.2);
  z-index: -1;
  text-shadow: 1px 1px 0 rgba(255, 0, 64, 0.15), 0 1px 0 rgba(255, 0, 64, 0.15), -1px 1px 0 rgba(255, 0, 64, 0.15), -1px 0 0 rgba(255, 0, 64, 0.15), -1px -1px 0 rgba(255, 0, 64, 0.15), 0 -1px 0 rgba(255, 0, 64, 0.15), 1px -1px 0 rgba(255, 0, 64, 0.15), -20px 20px 20px rgba(0, 0, 0, 0.9);
}
</style>
</head>
<body>
  <div class="text">
  <span>Supah</span>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
var el = document.querySelector('span'),
depth = 10;
for (i = 0; i < depth; i++) {if (window.CP.shouldStopExecution(0)) break;
  el.parentNode.append(el.cloneNode(true));
}window.CP.exitedLoop(0);
//# sourceURL=pen.js
    </script>
</body>
</html>

3. Pseudo 3D text

Made by JK. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  font-family: Arial;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
canvas {
  background: linear-gradient(
    to bottom,
    rgb(6,9,43) 0%,
    rgb(30,45,75) 100%
  );
}
canvas, menu {
  position: absolute;
  top: 0;
  color: white;
}
input, button {
  color: gray;
  font-size: 30px;
  background: transparent;
  border: 3px solid gray;
  padding: 5px;
  margin-top: 5px;
  transition: all 500ms;
}

button.active {
  color: aqua;
  border-color: aqua;
  box-shadow: 0 0 4px aqua;
  text-shadow: 0 0 14px aqua;
  transition: all 500ms;
}

label {
  display: inline-block;
  color: gray;
  padding: 10px;
}
</style>
</head>
<body>
  <canvas></canvas>
<menu>
  <form onsubmit="init(event)">
    <input type="text" id="textInput" maxLength="90" placeholder="Random text"/>
    <button>Run</button><br/>
    <button class="active" type="button" onClick="setSpeed(event, 40)">Fast</button>
    <button type="button" onClick="setSpeed(event, 15)">Slow</button>
  </form>
</menu>
      <script>
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const layers = 4;
let size = 0;
let particles = [];
let targets = [];
const lerp = (t, v0, v1) => (1 - t) * v0 + t * v1;
const fov = 2000;
const viewDistance = 200;
let targetRotationY = 0.5;
let rotationY = 0.5;
let speed = 40;
let animFrame;
const texts = [
'hello.',
'(╯°□°)╯︵ ┻━┻',
'CodePen <3',
'{ JavaScript }',
'We are the robots',
'C:\\>',
'Get creative!',
'I live in a giant bucket',
'sudo rm -rf /*',
'Eat your vegetables'];

let textIndex = 0;

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Vector3 {
  constructor(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }

  static fromScreenCoords(_x, _y, _z) {
    const factor = fov / viewDistance;
    const x = (_x - canvas.width / 2) / factor;
    const y = (_y - canvas.height / 2) / factor;
    const z = _z !== undefined ? _z : 0;

    return new Vector3(x, y, z);
  }

  rotateX(angle) {
    const z = this.z * Math.cos(angle) - this.x * Math.sin(angle);
    const x = this.z * Math.sin(angle) + this.x * Math.cos(angle);
    return new Vector3(x, this.y, z);
  }
  rotateY(angle) {
    const y = this.y * Math.cos(angle) - this.z * Math.sin(angle);
    const z = this.y * Math.sin(angle) + this.z * Math.cos(angle);
    return new Vector3(this.x, y, z);
  }
  pp() {
    const factor = fov / (viewDistance + this.z);
    const x = this.x * factor + canvas.width / 2;
    const y = this.y * factor + canvas.height / 2;
    return new Vector3(x, y, this.z);
  }}


function init(e) {
  if (e) e.preventDefault();
  cancelAnimationFrame(animFrame);
  const text = document.getElementById('textInput').value || texts[textIndex++ % texts.length];
  let fontSize = 150;
  let startX = window.innerWidth / 2;
  let startY = window.innerHeight / 2;
  particles = [];
  targets = [];
  // Create temp canvas for the text, draw it and get the image data.
  const c = document.createElement('canvas');
  const cx = c.getContext('2d');
  cx.font = `900 ${fontSize}px Arial`;
  let w = cx.measureText(text).width;
  const h = fontSize * 1.5;
  let gap = 7;

  // Adjust font and particle size to fit text on screen
  while (w > window.innerWidth * .8) {
    fontSize -= 1;
    cx.font = `900 ${fontSize}px Arial`;
    w = cx.measureText(text).width;
  }
  if (fontSize < 100) gap = 6;
  if (fontSize < 70) gap = 4;
  if (fontSize < 40) gap = 2;
  size = Math.max(gap / 2, 1);
  c.width = w;
  c.height = h;
  startX = Math.floor(startX - w / 2);
  startY = Math.floor(startY - h / 2);
  cx.fillStyle = '#000';
  // For reasons unknown to me, font needs to be set here again, otherwise font size will be wrong.
  cx.font = `900 ${fontSize}px Arial`;
  cx.fillText(text, 0, fontSize);
  const data = cx.getImageData(0, 0, w, h);


  // Iterate the image data and determine target coordinates for the flying particles
  for (let i = 0; i < data.data.length; i += 4) {
    const rw = data.width * 4;
    const rh = data.height * 4;
    const x = startX + Math.floor(i % rw / 4);
    const y = startY + Math.floor(i / rw);

    if (data.data[i + 3] > 0 && x % gap === 0 && y % gap === 0) {
      for (let j = 0; j < layers; j++) {
        targets.push(Vector3.fromScreenCoords(x, y, j * 1));
      }
    }
  }

  targets = targets.sort((a, b) => a.x - b.x);
  loop();
  return false;
}

function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // As long as there are targets, keep creating new particles.
  // Remove target from the targets array when it's been assigned to a particle.
  for (let i = 0; i < speed; i++) {
    if (targets.length > 0) {

      target = targets[0];
      x = canvas.width / 2 + target.x * 10;
      y = canvas.height / 2;
      z = -10;

      const position = Vector3.fromScreenCoords(x, y, z);
      const interpolant = 0;

      particles.push({ position, target, interpolant });
      targets.splice(0, 1);
    }
  }

  particles.
  sort((pa, pb) => pb.target.z - pa.target.z).
  forEach((p, i) => {
    if (p.interpolant < 1) {
      p.interpolant = Math.min(p.interpolant + .01, 1);

      p.position.x = lerp(p.interpolant, p.position.x, p.target.x);
      p.position.y = lerp(p.interpolant, p.position.y, p.target.y);
      p.position.z = lerp(p.interpolant, p.position.z, p.target.z);
    }
    const rotationX = Math.sin(Date.now() / 2000) * .8;
    rotationY = lerp(0.00001, rotationY, targetRotationY);
    const particle = p.position.
    rotateX(rotationX).
    rotateY(rotationY).
    pp();

    const s = 1 - p.position.z / layers;
    ctx.fillStyle = p.target.z === 0 ?
    'rgb(114, 204, 255)' :
    `rgba(242, 101, 49, ${s})`;

    ctx.fillRect(particle.x, particle.y, s * size, s * size);
  });

  animFrame = requestAnimationFrame(loop);
}

init();

window.addEventListener('mousemove', e => {
  const halfHeight = window.innerHeight / 2;
  targetRotationY = (e.clientY - halfHeight) / window.innerHeight;
});

function setSpeed(e, val) {
  document.querySelectorAll('button').forEach(el => {
    el.classList.remove('active');
  });
  e.target.classList.add('active');
  speed = val;
}
    </script>
</body>
</html>

4. Single element, multi coloured 3d text effect

Made by Mandy Michael. Source

Single element, multi coloured 3d text effect
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
html,
body {
  width: 100%;
  height: 100%;
  background: linear-gradient(10deg, #f4eba0 43%, #c0faca 43%);
}

h1 {
  font-family: "CoreCircus", sans-serif;
  text-transform: uppercase;
  font-size: 16vw;
  text-align: center;
  line-height: 1;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  color: #f98ca4;
  text-shadow: -1px -1px 0 #6e1f58, 1px -1px 0 #6e1f58, -1px 1px 0 #6e1f58, 1px 1px 0 #6e1f58, 1px 0px 0px #65f283, 0px 1px 0px #65f283, 2px 1px 0px #65f283, 1px 2px 0px #65f283, 3px 2px 0px #65f283, 2px 3px 0px #65f283, 4px 3px 0px #65f283, 3px 4px 0px #65f283, 5px 4px 0px #65f283, 3px 5px 0px #6e1f58, 6px 5px 0px #6e1f58, -1px 2px 0 black, 0 3px 0 #6e1f58, 1px 4px 0 #6e1f58, 2px 5px 0px #6e1f58, 2px -1px 0 #6e1f58, 3px 0 0 #6e1f58, 4px 1px 0 #6e1f58, 5px 2px 0px #6e1f58, 6px 3px 0 #6e1f58, 7px 4px 0 #6e1f58, 10px 10px 4px #dac249;
}
h1:after, h1:before {
  content: attr(data-heading);
  position: absolute;
  overflow: hidden;
  left: 0;
  width: 100%;
  top: 0;
  z-index: 5;
}
h1:before {
  text-shadow: -1px -1px 0 #9e132c, 1px -1px 0 #9e132c, -1px 1px 0 #9e132c, 1px 1px 0 #9e132c, 1px 0px 0px #f5b10b, 0px 1px 0px #f5b10b, 2px 1px 0px #f5b10b, 1px 2px 0px #f5b10b, 3px 2px 0px #f5b10b, 2px 3px 0px #f5b10b, 4px 3px 0px #f5b10b, 3px 4px 0px #f5b10b, 5px 4px 0px #f5b10b, 3px 5px 0px #9e132c, 6px 5px 0px #9e132c, -1px 2px 0 black, 0 3px 0 #9e132c, 1px 4px 0 #9e132c, 2px 5px 0px #9e132c, 2px -1px 0 #9e132c, 3px 0 0 #2f3e9c, 4px 1px 0 #9e132c, 5px 2px 0px #9e132c, 6px 3px 0 #9e132c, 7px 4px 0 #9e132c, 10px 10px 4px rgba(106, 241, 119, 0.8);
  color: #65f283;
  height: 66%;
}
h1:after {
  height: 33%;
  color: #4ad9db;
  text-shadow: -1px -1px 0 #2f3e9c, 1px -1px 0 #2f3e9c, -1px 1px 0 #2f3e9c, 1px 1px 0 #2f3e9c, 1px 0px 0px #f98ca4, 0px 1px 0px #f98ca4, 2px 1px 0px #f98ca4, 1px 2px 0px #f98ca4, 3px 2px 0px #f98ca4, 2px 3px 0px #f98ca4, 4px 3px 0px #f98ca4, 3px 4px 0px #f98ca4, 5px 4px 0px #f98ca4, 3px 5px 0px #2f3e9c, 6px 5px 0px #2f3e9c, -1px 2px 0 black, 0 3px 0 #2f3e9c, 1px 4px 0 #2f3e9c, 2px 5px 0px #2f3e9c, 2px -1px 0 #2f3e9c, 3px 0 0 #2f3e9c, 4px 1px 0 #2f3e9c, 5px 2px 0px #2f3e9c, 6px 3px 0 #2f3e9c, 7px 4px 0 #2f3e9c;
}

/*
 * Webfont: CoreCircus by S-Core
 * URL: http://www.myfonts.com/fonts/s-core/core-circus/regular/
 * Copyright: Copyright (c) 2013 by S-Core Co., Ltd.. All rights reserved.
 * Licensed pageviews: 10,000
*
 * Webfont: CoreCircus2DDot1 by S-Core
 * URL: http://www.myfonts.com/fonts/s-core/core-circus/dot1/
 * Copyright: Copyright (c) 2013 by S-Core Co., Ltd.. All rights reserved.
 * Licensed pageviews: 10,000
*/
@font-face {
  font-family: "CoreCircus2DDot1";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.eot");
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.woff2") format("woff2"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.ttf") format("truetype");
}
@font-face {
  font-family: "CoreCircus";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.eot");
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.woff2") format("woff2"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.ttf") format("truetype");
}
@font-face {
  font-family: "CoreCircusPierrot4";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_13_0.eot");
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_13_0.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_13_0.woff2") format("woff2"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_13_0.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_13_0.ttf") format("truetype");
}
</style>
</head>
<body>
  <h1 contenteditable data-heading="Piece of Cake">Piece of Cake</h1>
      <script>
// JS for content editable trick from Chris Coyier

var h1 = document.querySelector("h1");

h1.addEventListener("input", function () {
  this.setAttribute("data-heading", this.innerText);
});
    </script>
</body>
</html>

5. Word 3D

Made by Tiffany Rayside. Source

Word 3D
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body{
	background:#000;
}
#cloud{
  margin-top:0;
	position:absolute;
	top:50%;
	left:50%;
	width:70vw;
  height:100vh;
	transform: translate(-50%, -50%);
}
</style>
</head>
<body>
  <body>
  <div id='cloud'></div>
  <script src='https://d3js.org/d3.v3.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/d3.layout.cloud.js'></script>
      <script>
var fill = d3.scale.category20();
d3.layout.cloud().size([1050, 950]).
words([
".NET", "Silverlight", "AJAX", "jQuery", "CSS3", "HTML5", "JavaScript", "SQL", "C#", "App", "Inline", "Block-Level", "Elments", "Shadow", "Python", "Servers", "CODEPEN.IO", "Angular.js", "D3.js", "Velocity.js", "UI", "Semantic", "Material Design", "Chrome", "FireFox", "-WebKit", "-Moz", "Safari", "Opera", "Microsoft", "Java", "WebGL", "Apple", "iOS", "Touch", "Mouse", "Animation", "3D", "Rendering", "RWD", "Navigation", "a href =", "style", "Boolean", "CDATA", "Content", "Content", "DOM", "Dynamic", "Depreciated", "Web", "em", "HTTP://", "pixel", "rem", "vh", "vw", "font", "Microsoft", "font-family", "body", "script", "head", "code", "mark-up", "mark-down", "font-weight", "bold", "italic", "bar", "hexadecimal", "rgba", "hsla", "grid", "fluid", "tags", "source", "hyperlink", "IP", ".jpeg", ".png", "sprite", "background", "pattern", "img", "aside", "article", "footer", "transform", "translate", "skew", "morph", "meta", "data", "foo", "IP", "inline", "link", "url", "hue", "lorem ipsum", "input", "output", "psuedo", "selector", "schema", "object", "var", "class", "id", "media", "canvas", "typeface", "void", "validate", "WAMP", "Web", "WYSIWYG", "editor", "XML", "SVG", "Love My Pen", "TMRDevelops", "WireFrame", "PHP", "mySQL", "Ruby", "Mobile", "Desktop", "Tablet", "Developer Tools", "Test", "Live", "SASS", "HAML", "SCSS", "MixIn", "PlugIn", "Library", "Documentation", "-O", "-MS", "Tween", "buttons", "user", "FrontEnd", "BackEnd", "We Build Web Things", "Click", "Hover", "MouseMove", "Static", "Scroll", "Parallax", "Hide", "Show", "Filter", "Contrast", "Fill", "Color Pallette", "Draw()", "function()", "init()", "Slide", ".net", ".com", "CSSTricks", "columns", "layout", "Chrome", "Google", "Design", "particles", "engine", "threads", "Lorem Pixel", "Demo Or It Didn't Happen", "null", "array"].map(function (d) {
  return { text: d, size: 30 + Math.random() * 50 };
})).
padding(0).
rotate(function () {return ~~(Math.random() * 2) * 90;}).
font("Impact").
fontSize(function (d) {return d.size;}).
on("end", draw).
start();
function draw(words) {
  d3.select("#cloud").append("svg").
  attr("width", 3000).
  attr("height", 1050).
  append("g").
  attr("transform", "translate(550, 550)").
  selectAll("text").
  data(words).
  enter().append("text").
  style("font-size", function (d) {return d.size + "px";}).
  style("font-family", "Impact").
  style("text-shadow", " -1px 0 0px rgba(255,0,0,0.4), 0 1px 0px rgba(255,255,255,0.4), -2px 1px 0px rgba(255,255,255,0.4), -1px 2px 0px rgba(255,255,255,0.4), -3px 2px 0px rgba(255,255,255,0.4), -2px 3px 0px rgba(255,255,255,0.4), -4px 3px 0px rgba(255,255,255,0.4), -3px 4px 0px rgba(255,255,255,0.4), -5px 4px 0px rgba(255,0,0,0.4), -4px 5px 0px rgba(255,255,255,0.4), -6px 5px 0px rgba(255,255,255,0.4), -5px 6px 15px rgba(255,255,255,0.4)").
  style("fill", function (d, i) {return fill(i);}).
  attr("text-anchor", "middle").
  attr("transform", function (d) {
    return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
  }).
  text(function (d) {return d.text;});
}
    </script>
</body>
</html>

6. Mouse tracking 3D text with light source

Made by Jeremy Russell. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto);
		* {
		  margin: 0;
		  padding: 0
		}
		html { box-sizing: border-box; }
		body {
		  font-family: "Roboto", sans-serif;
      min-height:100vh;
      background:radial-gradient(circle at 48% 28%, #eee 20%, #aaa); 
      background: -webkit-radial-gradient(48% 28%,#eee 20%, #aaa);
		}
		
		header {
		  -webkit-perspective: 1500px;
		  perspective: 1500px;
		}
		
		header h1 {
		  font-size: 6vw;
		  line-height: 7vw;
		  letter-spacing: 1vw;
		  color: #fff;
		  display:block;
      position:absolute;
      width:100vw;
      top: calc( 50vh - 7vh );
		  text-align: center;
		  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
		}
</style>
</head>
<body>
  <header>
  <h1>codepen</h1>
</header>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
window.addEventListener ? window.addEventListener("mousemove", showMouseXY, false) : window.attachEvent && window.attachEvent("onmousemove", showMouseXY);

function text3d(x, y) {
  var colors3d = ["#cccccc", "#c9c9c9", "#bbbbbb", "#b9b9b9", "#aaaaaa", "#a9a9a9"];
  var styleStore = "";
  for (var i = 0; i < 6; i++) {if (window.CP.shouldStopExecution(0)) break;
    styleStore += x * (i * .03) + "px " + y * (i * .03) + "px 0 " + colors3d[i] + ",";
  }window.CP.exitedLoop(0);
  return styleStore.substr(0, styleStore.length - 1);
}

function shadow3d(x, y) {
  var shadow = ["rgba(0,0,0,.1)", "rgba(0,0,0,.15)", "rgba(0,0,0,.2)", "rgba(0,0,0,.2)", "rgba(0,0,0,.25)", "rgba(0,0,0,.3)"];
  var styleStore = "";
  for (var i = 0; i < 6; i++) {if (window.CP.shouldStopExecution(1)) break;
    styleStore += x * (i * .15) + "px " + y * (i * .15) + "px " + i * 4 + "px " + shadow[i] + ",";
  }window.CP.exitedLoop(1);
  return styleStore.substr(0, styleStore.length - 1);
}

function showMouseXY(event) {
  var target = document.querySelector("header h1");
  var body = document.querySelector("body");
  var cX = -(window.innerWidth / 2 - event.clientX) / 10;
  var cY = (window.innerHeight / 2 - event.clientY) / 10;
  target.setAttribute("style", "text-shadow:" + text3d(-cX, cY) + "," + shadow3d(-cX, cY) + ";transform:rotateY(" + cX + "deg) rotateX(" + cY + "deg);");
  var radX = event.clientX > window.innerWidth * .333333 ? event.clientX < window.innerWidth * .666666 ? "center" : "right" : "left";
  var radY = event.clientY > window.innerHeight * .333333 ? event.clientY < window.innerHeight * .666666 ? "center" : "bottom" : "top";
  console.log("x: " + cX);
  console.log("y: " + cY);
  console.log("x: " + radX);
  console.log("y: " + radY);

  var bgX = -((event.clientX - window.innerWidth) / window.innerWidth) * 100;
  var bgY = -((event.clientY - window.innerHeight) / window.innerHeight) * 100;
  body.setAttribute("style", "background: radial-gradient(circle at " + bgX + "% " + bgY + "%, #eee 20%, #aaa); background: -webkit-radial-gradient(" + bgX + "% " + bgY + "%,#eee 20%, #aaa);");
  console.log("background: radial-gradient(circle at " + bgX + "% " + bgY + "%, #eee 20%, #aaa; background: -webkit-radial-gradient(" + bgX + "% " + bgY + "%,#eee 20%, #aaa);");

}
    </script>
</body>
</html>

7. 3D Text animation

Made by Sergey. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet"> 
<style>
body {
  background: linear-gradient(to bottom, white 0%, #dcdcde 30%, rgba(0, 0, 0, 0.4) 100%);
  background-repeat: no-repeat;
  height: 100vh;
}

.transformers {
  position: relative;
  margin: auto;
  padding-top: 15%;
}
.transformers .t3xts {
  letter-spacing: 1px;
  font-family: "Anton", sans-serif;
  font-size: 70px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  position: relative;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  text-shadow: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0, 0, 0, 0.15), 0px 24px 2px rgba(0, 0, 0, 0.1), 0px 34px 30px rgba(0, 0, 0, 0.1);
}
.transformers .t3xt {
  position: absolute;
  text-transform: uppercase;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.transformers .t3xt-out {
  -webkit-animation: text-out 0.5s ease;
          animation: text-out 0.5s ease;
}
.transformers .t3xt-in {
  -webkit-animation: text-in 0.5s ease;
          animation: text-in 0.5s ease;
}
@-webkit-keyframes text-out {
  to {
    transform: rotateX(-90deg);
    opacity: 0;
  }
}
@keyframes text-out {
  to {
    transform: rotateX(-90deg);
    opacity: 0;
  }
}
@-webkit-keyframes text-in {
  from {
    opacity: 0;
    transform: rotateX(90deg);
  }
  to {
    transform: rotateX(0deg);
    opacity: 1;
  }
}
@keyframes text-in {
  from {
    opacity: 0;
    transform: rotateX(90deg);
  }
  to {
    transform: rotateX(0deg);
    opacity: 1;
  }
}
</style>
</head>
<body>
<header>
<div class="transformers">
  <div class="t3xts t3xt-1">Amazing</div>
  <div class="t3xts t3xt-2">3D text</div>
  <div class="t3xts t3xt-3">For your</div>
  <div class="t3xts t3xt-4">site</div>
</div>
</header>
      <script>
function n3xt(text, element) {
  var sample = document.querySelector(element);
  if (sample.dataset.animating === 'true') return;
  var sampleH = 70; // будет держать текст фиксированным, в противном случае - offsetHeight
  var sampleT = sample.textContent; // старый текст
  var sampleNT = text; // новый текст
  sample.dataset.animating = 'true';
  sample.style.height = sampleH + 'px';

  // исходный текстовый блок
  var samO = document.createElement('div');
  samO.style.transformOrigin = '0 ' + sampleH / 2 + 'px -' + sampleH / 2 + 'px';
  samO.classList.add('t3xt');
  samO.textContent = sampleT;

  // новый текстовый блок
  var samN = samO.cloneNode();
  samN.textContent = sampleNT;
  sample.textContent = '';
  sample.appendChild(samO);
  sample.appendChild(samN);

  samO.classList.add('t3xt-out');
  samN.classList.add('t3xt-in');

  samN.addEventListener('animationend', function (event) {
    sample.removeChild(samO);
    sample.removeChild(samN);
    sample.textContent = sampleNT;
    sample.dataset.animating = 'false';
  });
}

var phraseIndex = 1;
var wordIndex = 0;
var t3xts = [
["Awesome", "Incredible", "Funny", "Best"],
["Amazing", "3DText", "For your", "Site"]];


// Задержка начала анимации
setTimeout(changetext, 2000);
// Количество строк анимации 
// 4 = (wordIndex > 3)
// 3 = (wordIndex > 2)...
function changetext() {
  if (wordIndex > 3) {
    wordIndex = 0;
    phraseIndex++;
  }
  if (phraseIndex >= t3xts.length) {
    phraseIndex = 0;
  }
  var term = t3xts[phraseIndex][wordIndex];
  n3xt(term, '.t3xt-' + ++wordIndex);
  // Количество строк для анимации с учётом общего таймаута:
  //если wordIndex == 4 то строк учавствует 4
  //если wordIndex == 2 то строки 2, затем следующие 2 после времени общего таймаута
  if (wordIndex == 4) {
    //Общий таймаут:
    //Задержка анимации между строк (var t3xts = [])
    setTimeout(changetext, 5000);
  } else {
    //Таймаут анимации строк:
    //Меньше цифры - быстрее прокрутка всех строк
    //Больше цифры - медленее и построчно
    setTimeout(changetext, 200);
  }
}
    </script>
</body>
</html>