CSS transformations

This example show CSS 3 transformations. It shows a text box rotated by 90, 180, 270 degree and an image rotated and scaled.

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  OK
Weasyprint  OK
PagedJS  OK
Typeset.sh  OK
Vivliostyle  OK
BFO  OK
OK OK with issues Error Unsupported

HTML input

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>

        <div id="text">

            <div class="sample rotate-45">
               Sem at mollis pharetra, leo sapien pretium elit, a faucibus sapien dolor vel
                pede. Vestibulum et enim ut nulla sollicitudin adipiscing. Suspendisse
                malesuada venenatis mauris. Curabitur ornare mollis velit. Sed vitae metus.
                Morbi posuere mi id odio. Donec elit sem, tempor at, pharetra eu, sodales sit
                amet, elit.

                Curabitur urna tellus, aliquam vitae, ultrices eget, vehicula nec, diam.
                Integer elementum, felis non faucibus euismod, erat massa dictum eros, eu
                ornare ligula tortor et mauris. Cras molestie magna in nibh. Aenean et tellus.
                Fusce adipiscing commodo erat. In eu justo. Nulla dictum, erat sed blandit
                venenatis, arcu dolor molestie dolor, vitae congue orci.
            </div>
            <div class="sample rotate-90">
               Sem at mollis pharetra, leo sapien pretium elit, a faucibus sapien dolor vel
                pede. Vestibulum et enim ut nulla sollicitudin adipiscing. Suspendisse
                malesuada venenatis mauris. Curabitur ornare mollis velit. Sed vitae metus.
                Morbi posuere mi id odio. Donec elit sem, tempor at, pharetra eu, sodales sit
                amet, elit.

                Curabitur urna tellus, aliquam vitae, ultrices eget, vehicula nec, diam.
                Integer elementum, felis non faucibus euismod, erat massa dictum eros, eu
                ornare ligula tortor et mauris. Cras molestie magna in nibh. Aenean et tellus.
                Fusce adipiscing commodo erat. In eu justo. Nulla dictum, erat sed blandit
                venenatis, arcu dolor molestie dolor, vitae congue orci.
            </div>
            <div class="sample rotate-180">
               Sem at mollis pharetra, leo sapien pretium elit, a faucibus sapien dolor vel
                pede. Vestibulum et enim ut nulla sollicitudin adipiscing. Suspendisse
                malesuada venenatis mauris. Curabitur ornare mollis velit. Sed vitae metus.
                Morbi posuere mi id odio. Donec elit sem, tempor at, pharetra eu, sodales sit
                amet, elit.

                Curabitur urna tellus, aliquam vitae, ultrices eget, vehicula nec, diam.
                Integer elementum, felis non faucibus euismod, erat massa dictum eros, eu
                ornare ligula tortor et mauris. Cras molestie magna in nibh. Aenean et tellus.
                Fusce adipiscing commodo erat. In eu justo. Nulla dictum, erat sed blandit
                venenatis, arcu dolor molestie dolor, vitae congue orci.
            </div>
            <div class="sample rotate-270">
               Sem at mollis pharetra, leo sapien pretium elit, a faucibus sapien dolor vel
                pede. Vestibulum et enim ut nulla sollicitudin adipiscing. Suspendisse
                malesuada venenatis mauris. Curabitur ornare mollis velit. Sed vitae metus.
                Morbi posuere mi id odio. Donec elit sem, tempor at, pharetra eu, sodales sit
                amet, elit.

                Curabitur urna tellus, aliquam vitae, ultrices eget, vehicula nec, diam.
                Integer elementum, felis non faucibus euismod, erat massa dictum eros, eu
                ornare ligula tortor et mauris. Cras molestie magna in nibh. Aenean et tellus.
                Fusce adipiscing commodo erat. In eu justo. Nulla dictum, erat sed blandit
                venenatis, arcu dolor molestie dolor, vitae congue orci.
            </div>

        </div>

        <div id="images">    
            <img id="tux1" class="tux" src="Tux.svg" />
            <img id="tux2" class="tux" src="Tux.svg" />
            <img id="tux3" class="tux" src="Tux.svg" />
        </div>
    </body>
</html>

Stylesheet

@import url("../styles/a4.css");

.sample {
    display: block;
    width: 50%;
    border: 1px solid blue;
    padding: 1em;
    break-after: page;;
}

.rotate-90 {
    transform: rotate(90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.rotate-270 {
    transform: rotate(270deg);
}


.tux {
    width: 5cm;
    height: 5cm;
    border: 1px solid blue;
    position: absolute;
    left: 4cm;
    transform-origin: center;
}

#tux1 {
    top: 2cm;
    transform: rotate(0.001deg); /* PDFreactor error */
}

#tux2 {
    top: 8cm;
    transform: rotate(45deg) scale(1.5);
}

#tux3 {
    top: 20cm;
    transform: rotate(90deg)  scale(2.0);
}