Mam pewien problem z drukowaniem elementu obróconego przez rotate. Problem występuje w Mozilli (nie, zmiana na inną przeglądarkę to nie rozwiązanie problemu).
Otóż chcę mieć pionowego diva w lewym dolnym rogu kartki. Ustawiam mu więc:
div{
width: 200px;
height: 400px;
background: red;
position: absolute;
left: 0;
bottom: 0;
}
i wszystko gra. Muszę jednak tego pionowego diva wydrukować tak, aby był w poziomie, więc w CSSie rotuje go o 90 stopni i do powyższego kodu dodaję:
transform:rotate(90deg);
Jednak skoro obiekt był ustawiony w lewym dolnym rogu, a oś obrotu znajduje się pośrodku elementu to teraz jego część wystaje poza ekran. Trzeba go przesunąć, aby znów znajdował się w rogu. Do powyższego dodajemy:
bottom: -100px;
left: 100px;
Świetnie. Rotowanie w CSS3 ma jednak to do siebie, że obiekt obrócony zostaje wyrenderowany obrócony, ale w rzeczywistości zachowuje się tak, jakby nie był obrócony. Czyli my widzimy (np. w podglądzie wydruku), że mamy już poziomy div w samym rogu, ale przeglądarka widzi go jakby to był normalny pionowy div i to nie w rogu, a przesunięty poza dolną krawędź o 100px i w prawo o 100px. Po wydruku ta obcięta część ląduje na drugiej stronie. I teraz pytanie: jak to obejść. Chce mieć diva obróconego o 90 stopni wydrukowanego w całości w lewym dolnym rogu ekranu.
Poniżej kod do przetestowania w mozilli:
<!DOCTYPE >
<html>
<head>
<script>
</script>
<style>
*{
margin: 0;
padding: 0;
}
body{
overflow: hidden;
}
@page{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
div{
position: absolute;
bottom: -100px;
left: 100px;
width: 200px;
height: 400px;
background: red;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>