CSS transformations3

This example show a text box and and an image - both mirrored using the CSS class flip.

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>
            <img src="kanguru.jpg">
        </div>
        <div class="flip">
            <img src="kanguru.jpg">
        </div>

        <div class="text"> Arcu dapibus a magnis aenean. Et facilisis? Nunc integer diam vut
        massa urna augue porttitor, magna aenean, adipiscing parturient non,
        nisi pulvinar mauris magna lorem massa hac rhoncus, mus egestas? Diam
        ridiculus nec, aliquet, amet sit massa turpis ut est urna facilisis.
        Integer urna sed, nisi augue turpis pulvinar scelerisque nisi natoque
        tristique ac ac est, cras! 
        </div>

        <div class="text flip"> Arcu dapibus a magnis aenean. Et facilisis? Nunc integer diam vut
        massa urna augue porttitor, magna aenean, adipiscing parturient non,
        nisi pulvinar mauris magna lorem massa hac rhoncus, mus egestas? Diam
        ridiculus nec, aliquet, amet sit massa turpis ut est urna facilisis.
        Integer urna sed, nisi augue turpis pulvinar scelerisque nisi natoque
        tristique ac ac est, cras! 
        </div>
    </body>
</html>

Stylesheet

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

img {
    width: 8cm;
}

.text {
    width: 8cm;
    border: 1px dashed grey;
    padding: 0.5cm;
}

.flip {
    transform: scaleX(-1);
}