CSS 2D and 3D Transformations

EVO PDF Client for .NET Documentation

The CSS 2D transformations can be used in HTML documents to translate, rotate, scale, skew various HTML elements. The CSS 3D transformations can be used to create spectacular effects in HTML documents by moving, rotating or changing the perspective in 3D space. The syntax accepted by EVO HTML to PDF Converter for CSS transformations is compatible with WebKit rendering engine and is based on -webkit-transform CSS property.

CSS 2D Transformations

You can use CSS3 2D transformations to translate, rotate, scale or skew various HTML elements. In the HTML example below, a DIV element with text is translated and rotated:

XML

Copy

<!DOCTYPE html>
<html>
<head>
    <title>CSS Transformations</title>
    <style>
        div {
            -webkit-transform: translate(100px, 100px) rotate(30deg);
            width: 100px;
            height: 75px;
            background-color: lightgreen;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div>This DIV is rotated.</div>
</body>
</html>

CSS 3D Transformations

The CSS3 3D transformations, like perspective projection, are not enabled by default. You can enable the CSS 3D transformations setting the HtmlToPdfConverterEnable3DTransformations property of the converter on true like below:

Copy

using EvoPdf.HtmlToPdfClient;
HtmlToPdfConverter htmlToPdfConverter = new HtmlToPdfConverter();
htmlToPdfConverter.Enable3DTransformations = true;

An example of HTML document using the 3D perspective projection is:

XML

Copy

<html>
<head>
    <style>
        div {
            -webkit-transform: perspective(200px) rotateY(45deg);
            width: 200px;
            height: 100px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <br /><br />
    <div>Hello</div>
</body>
</html>