3D transforms

CSS 3D transforms allow us to rotate elements in (so perceived) third dimension
All that is really needed is a simple transform method such as rotate{X,Y,Z}() that takes exactly one argument - the amount of wanted rotation.

a note about Fira Code

The h1 font inside the divs below is specified as Fira Code Retina, so in case you didn't have it installed, the glyphs wouldn't show up nicely.
I added it to the site, though.
That way you don't have to have it installed on your device.
To understand why "ss07", "zero" was used you can read this.

<~~ rotate X ~~>

A div rotated along its x-axis

#div3dtransformrotate-x {
    text-align: center;
    border-radius: 7px;
    padding: 5px 0;
    min-height: 100px;
    margin: 0 3em;
    -webkit-transform: rotateX(60deg);
    -ms-transform: rotateX(60deg);
    transform: rotateX(60deg);
    background: radial-gradient(
        circle,
        rgba(2,0,36,1) 0%,
        rgba(9,9,121,1) 52%,
        rgba(0,212,255,1) 100%
    );
    opacity: 0.95;
}
#div3dtransformrotate-x h1 {
    font-family: 'Fira Code Retina';
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss07", "zero";
}

<~~ rotate Y ~~>

A div rotated along its y-axis

#div3dtransformrotate-y {
    text-align: center;
    border-radius: 7px;
    padding: 5px 0;
    min-height: 100px;
    margin: 1em 3em;
    -webkit-transform: rotateY(50deg);
    -ms-transform: rotateY(50deg);
    transform: rotateY(50deg);
    background: radial-gradient(
        circle,
        rgba(2,0,36,1) 0%,
        rgba(9,9,121,1) 42%,
        rgba(0,212,255,1) 100%
    );
    opacity: 0.95;
}
#div3dtransformrotate-y h1 {
    font-family: 'Fira Code Retina';
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss07", "zero";
}

<~~ rotate Z ~~>

A div rotated along its z-axis

#div3dtransformrotate-z {
    text-align: center;
    border-radius: 7px;
    padding: 5px 0;
    min-height: 100px;
    margin: 0 3em;
    -webkit-transform: rotateZ(4deg);
    -ms-transform: rotateZ(4deg);
    transform: rotateZ(4deg);
    background: radial-gradient(
        circle,
        rgba(2,0,36,1) 0%,
        rgba(9,9,121,1) 52%,
        rgba(0,212,255,1) 100%
    );
    opacity: 0.95;
}
#div3dtransformrotate-z h1 {
    font-family: 'Fira Code Retina';
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss07", "zero";
}