perspective · Functions · CSS

The perspective CSS function specifies a perspective projection matrix.

This matrix scales points in X and Y based on their Z value, scaling points with positive Z values away from the origin, and those with negative Z values towards the origin. Points on the z=0 plane are unchanged. The parameter represents the distance of the z=0 plane from the viewer. Lower values give a more flattened pyramid and therefore a more pronounced perspective effect. If the depth value is less than 1px, it must be treated as 1px for the purpose of rendering, for computing the resolved value of transform, and when used as the endpoint of interpolation.

Syntax

CSS

perspective()

Values

<perspective()> =
    perspective(
        [ <length [0,∞]> | none ]
    )

<length>

Specifies the length using a number followed by a unit of measurement.

none

Specifies a missing component.

Examples

1 · length

<!doctype html>
<html>
<head>
    <style>
        .cube
        {
            height: 100px;
            margin: 100px;
            transform: perspective(100px);
            transform-style: preserve-3d;
            width: 100px;
        }
        .side
        {
            color: white;
            font-family: sans-serif;
            font-size: 50px;
            height: 100px;
            line-height: 100px;
            position: absolute;
            text-align: center;
            width: 100px;
        }
        .side1
        {
            background-color: rgb(255 0 0 / 0.5);
            transform: rotateY(-90deg) translateZ(50px);
        }
        .side2
        {
            background-color: rgb(255 255 0 / 0.5);
            transform: rotateY(90deg) translateZ(50px);
        }
        .side3
        {
            background-color: rgb(0 255 0 / 0.5);
            transform: rotateX(90deg) translateZ(50px);
        }
        .side4
        {
            background-color: rgb(0 255 255 / 0.5);
            transform: rotateX(-90deg) translateZ(50px);
        }
        .side5
        {
            background-color: rgb(0 0 255 / 0.5);
            transform: rotateY(180deg) translateZ(50px);
        }
        .side6
        {
            background-color: rgb(255 0 255 / 0.5);
            transform: translateZ(50px);
        }
    </style>
</head>
<body>
    <p>length</p>
    <div class="cube">
        <div class="side side1">1</div>
        <div class="side side2">2</div>
        <div class="side side3">3</div>
        <div class="side side4">4</div>
        <div class="side side5">5</div>
        <div class="side side6">6</div>
    </div>
</body>
</html>

2 · none

<!doctype html>
<html>
<head>
    <style>
        .cube
        {
            height: 100px;
            margin: 100px;
            transform: perspective(none);
            transform-style: preserve-3d;
            width: 100px;
        }
        .side
        {
            color: white;
            font-family: sans-serif;
            font-size: 50px;
            height: 100px;
            line-height: 100px;
            position: absolute;
            text-align: center;
            width: 100px;
        }
        .side1
        {
            background-color: rgb(255 0 0 / 0.5);
            transform: rotateY(-90deg) translateZ(50px);
        }
        .side2
        {
            background-color: rgb(255 255 0 / 0.5);
            transform: rotateY(90deg) translateZ(50px);
        }
        .side3
        {
            background-color: rgb(0 255 0 / 0.5);
            transform: rotateX(90deg) translateZ(50px);
        }
        .side4
        {
            background-color: rgb(0 255 255 / 0.5);
            transform: rotateX(-90deg) translateZ(50px);
        }
        .side5
        {
            background-color: rgb(0 0 255 / 0.5);
            transform: rotateY(180deg) translateZ(50px);
        }
        .side6
        {
            background-color: rgb(255 0 255 / 0.5);
            transform: translateZ(50px);
        }
    </style>
</head>
<body>
    <p>none</p>
    <div class="cube">
        <div class="side side1">1</div>
        <div class="side side2">2</div>
        <div class="side side3">3</div>
        <div class="side side4">4</div>
        <div class="side side5">5</div>
        <div class="side side6">6</div>
    </div>
</body>
</html>

3 · JS

<!doctype html>
<html>
<head>
    <style>
        .cube
        {
            height: 100px;
            margin: 100px;
            transform-style: preserve-3d;
            width: 100px;
        }
        .side
        {
            color: white;
            font-family: sans-serif;
            font-size: 50px;
            height: 100px;
            line-height: 100px;
            position: absolute;
            text-align: center;
            width: 100px;
        }
        .side1
        {
            background-color: rgb(255 0 0 / 0.5);
            transform: rotateY(-90deg) translateZ(50px);
        }
        .side2
        {
            background-color: rgb(255 255 0 / 0.5);
            transform: rotateY(90deg) translateZ(50px);
        }
        .side3
        {
            background-color: rgb(0 255 0 / 0.5);
            transform: rotateX(90deg) translateZ(50px);
        }
        .side4
        {
            background-color: rgb(0 255 255 / 0.5);
            transform: rotateX(-90deg) translateZ(50px);
        }
        .side5
        {
            background-color: rgb(0 0 255 / 0.5);
            transform: rotateY(180deg) translateZ(50px);
        }
        .side6
        {
            background-color: rgb(255 0 255 / 0.5);
            transform: translateZ(50px);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="perspective(100px)">length</button>
    <button value="perspective(none)">none</button>
    <p>perspective</p>
    <div class="cube">
        <div class="side side1">1</div>
        <div class="side side2">2</div>
        <div class="side side3">3</div>
        <div class="side side4">4</div>
        <div class="side side5">5</div>
        <div class="side side6">6</div>
    </div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector(".cube").style.transform = myparameter;
        }
        const myelements = document.querySelectorAll("button");
        for(const myelement of myelements)
        {
            const myargument = myelement.value || myelement.innerHTML;
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>