Lesson: lesson-css-transformations3

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

PDF files

Converter PDF Preview
PDFreactor
OK
Download
PrinceXML
OK
Download
Antennahouse
OK
Download
Vivliostyle
OK
Download

Stylesheet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
@import url("../styles/a4.css");

img {
    width: 8cm;
}

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

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

HTML input

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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>