Lesson: lesson-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.

PDF files

Converter PDF Preview
PDFreactor
OK
Download
PrinceXML
OK
Download
Antennahouse
OK
Download
Vivliostyle
ERROR
Download
Regression error: images missing on last page

Stylesheet

 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
@import url("../styles/a4.css");

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

.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);
}

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<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>