在同一张照片上打印横向div和纵向div

Question

I would like to know if it's possible to print some part of a web page in landscape and other part in portrait.If yes, how?

More details: I'm currently doing a web page where we can found an image (in a div) and a table(in an another div). The image is on a page and the table on an other page. Sometimes my image need to be printed in landscape. The table is always in portrait. So what I did for the moment is: ` $distanceY) { ?>

                        <div  id="plancompletpaysage" class="impression-paysage">
                            <?php
                            echo '<img src="plan.php?restaurant=' . $_POST['restaurant'] . '&seance=' . $_POST['seance'] . '&date=' . $_POST['date'] . '&heure=' . $_POST['heure'] . '"  usemap="places" />';
                            ?>
                        </div>
                        <?php
                    }
                    if ($distanceX < $distanceY) {
                        ?>                   
                        <div  id="plancompletportrait" class="impression-portrait">
                            <?php
                            echo '<img src="plan.php?restaurant=' . $_POST['restaurant'] . '&seance=' . $_POST['seance'] . '&date=' . $_POST['date'] . '&heure=' . $_POST['heure'] . '"  usemap="places" />';
                            ?>
                        </div>
                        <?php
                    }
                    ?>`

I try that:

<style>
 @media print{
            @page paysage{
                size: landscape;
            }

            .impression-paysage{
                page: paysage;
            }

        }  
</style>

Using that change nothing. Everything stay in portrait.

Thank you for your help.

EDIT: This is the solution I find with the help @Mordecai :

                .impression-paysage{

                display: block;
                margin-top:120px;

                margin-left:-100px;
                text-align:center;
                width:140%;
                height:160%;
                transform: rotate(-90deg);
                zoom: 150% ;

            }

So 1st step: resize the div. The 2nd step: rotation of the div.

Answer 1

Page printing layout is portrait by default.

To print div .impression-paysage in landscape orientation, you can use transform:rotate(90deg) or transform:rotate(-90deg) .

@media print {
  .impression-paysage {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}