``````<h2>Super Cool</h2>
<h1>Super 3D</h1>
<h2>SCSS Mixin</h2>
``````
``````@function parseInt(\$n) {
@return \$n / (\$n * 0 + 1);
}

@function pow(\$number, \$exp) {
\$value: 1;
@if \$exp > 0 {
@for \$i from 1 through \$exp {
\$value: \$value * \$number;
}
}
@else if \$exp < 0 {
@for \$i from 1 through -\$exp {
\$value: \$value / \$number;
}
}
@return \$value;
}

@function fact(\$number) {
\$value: 1;
@if \$number > 0 {
@for \$i from 1 through \$number {
\$value: \$value * \$i;
}
}
@return \$value;
}

@function pi() {
@return 3.14159265359;
}

\$unit: unit(\$angle);
\$unitless: \$angle / (\$angle * 0 + 1);
// If the angle has 'deg' as unit, convert to radians.
@if \$unit == deg {
\$unitless: \$unitless / 180 * pi();
}
@return \$unitless;
}

@function sin(\$angle) {
\$sin: 0;
// Iterate a bunch of times.
@for \$i from 0 through 10 {
\$sin: \$sin + pow(-1, \$i) * pow(\$angle, (2 * \$i + 1)) / fact(2 * \$i + 1);
}
@return \$sin;
}

@function cos(\$angle) {
\$cos: 0;
// Iterate a bunch of times.
@for \$i from 0 through 10 {
\$cos: \$cos + pow(-1, \$i) * pow(\$angle, 2 * \$i) / fact(2 * \$i);
}
@return \$cos;
}

@function tan(\$angle) {
@return sin(\$angle) / cos(\$angle);
}

//*
// Create 3D text effect
//
//
// @param number \$angle The angle at which the 3D effect should be
//    rendered. 0deg being up, 180deg being down.
//
@function text-3d(
\$depth,
\$highlight,
\$angle,
\$tweak: 0,
) {
\$angle: (\$angle+90) % 360;
\$hd: 0;
\$sd: 0;
\$d: parseInt(\$depth) - 1;
\$u: unit(\$depth);
\$body: ();

@for \$i from 0 through \$d {
\$b: if(\$i > \$d/2, \$d - \$i, \$i);

// Build Highlight Body
\$thd: \$hd;
\$hd: cos(\$angle) + \$hd;
\$hb: if(\$b < \$tweak, abs(\$hd - \$thd)*\$b, abs(\$hd - \$thd)*\$tweak);
\$body: append(\$body, #{\$hd + \$u} #{\$sd + \$u} #{\$hb + \$u} \$highlight, comma);

\$tsd: \$sd;
\$sd: sin(\$angle) + \$sd;
\$sb: if(\$b < \$tweak, abs(\$sd - \$tsd)*\$b, abs(\$sd - \$tsd)*\$tweak);
\$body: append(\$body, #{\$thd + \$u} #{\$sd + \$u} #{\$sb + \$u} \$shadow, comma);
}

@return \$body;
}

@function extrude(
\$depth,
\$angle
) {
\$angle: (\$angle+90) % 360;
\$d: parseInt(\$depth) - 1;
\$u: unit(\$depth);
@return translatex(#{cos(\$angle)*\$d*-1+\$u}) translatey(#{sin(\$angle)*\$d*-1+\$u});
}

@mixin text-3d(
\$depth,
\$highlight,
\$angle,
\$tweak: 0
) {
\$depth,
\$highlight,
\$angle,
\$tweak
);
}

// #{cos(\$angle)*\$d+\$u} #{sin(\$angle)*\$d+\$u} \$depth hsla(0, 0%, 0%, 1)

h1, h2 {
margin: 0;
line-height: 1;
font-weight: 400;
}

h1 {
color: hsl(0, 100%, 55%);
font-size: 5em;
@include text-3d(45px, hsl(200, 100%, 15%), hsl(200, 100%, 45%), 125deg);
transform: extrude(45px, 125deg);
position: relative;
z-index: 1;
}

h2 {
color: hsl(60, 90%, 45%);
font-size: 2.5em;
@include text-3d(35px, hsl(0, 90%, 25%), hsl(0, 90%, 45%), 125deg);
transform: extrude(45px, 125deg);
}

h2:first-of-type {
position: relative;
z-index: 2;
}

body {
font-family: 'Bowlby One SC', sans-serif;
text-transform: uppercase;
background-color: #084a9c;
}

// Center using flexbox
:root{height:100%;display:flex}:root>*{margin:auto;text-align: center}
``````

External JavaScript

This Pen doesn't use any external JavaScript resources.