Recent Posts

Rotate and translate

If you rotate a 2-dim. figure around two different center points with the same angle, you need an extra translation to move the images into the same position. For simplicity, we assume that one center is the origin, and the other is $c=(c_x, c_y, 1)^T$ (homogeneous coordinates in projective space). Let’s determine the equations to convert the rotation $R$ around $c$ into a rotation around the origin $O=(0,0, 1)^T$, followed by a translation $t=(t_x, t_y, 1)^T$.

Read More…

The whole browser window but a border

Filling the whole browser window except for a border is surprisingly difficult. Here are three solutions. </head> <body> <div class="outer outer1"> <div class="inner"> </div> </div> </body> </html> Instead of outer1, there is also outer2 and outer3. The solutions use different approaches: The calc() function to do math in CSS, absolute positioning with top, left, bottom, right and the new box-sizing property. Here is the stylesheet: html, body { margin: 0px;

Read More…

Recent Publications