we.type | LA_transform-skew

<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
|                                                                 |
|                Filename : LA_transform-skew.html                |    
|                   Label : Basics                                |
|                  Author : Leonard Anders                          |
|                    Size : 2.331 bytes (4 KB on disk)            |
|                 Created : 10. February 2024 at 23:44            |
|                                                                 |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transform: skew</title>
    <style>
        @font-face {
            font-family: Konsole;
            src: url(../_fonts/Konsolev1.1-VF.ttf);
        }

        body {
            font-family: Konsole;
            font-size: 6vh;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            height: 100vh;
        }

        .class-1 {
        /* defines a transformation that skews the font at 50px */
            transform: skew(50px)
        }

        .class-2 {
        /* defines a transformation that skews the font at -15deg */
            transform: skew(-15deg)
        }

        .class-3 {
        /* defines a transformation that skews the font at -30deg */
            transform: skew(-30deg)
        }

        .class-4 {
        /* defines a transformation that skews the font at -60deg */
            transform: skew(-60deg)
        }

        .class-5 {
        /* defines a transformation that skews the font at -80deg */
            transform: skew(-80deg)
        }
    </style>
</head>

<body>
    <div>
        <p class="class-4">-60° skew</p>
        <p class="class-2">-15° skew</p>
        <p class="class-3">-30° skew</p>
        <p class="class-5">-80° skew</p>
        <p class="class-1">5° skew</p>
    </div>
</body>

</html>