Rotating images with CSS and putting them back in place

Posted by fuenfundachtzig on Stack Overflow See other posts from Stack Overflow or by fuenfundachtzig
Published on 2010-04-22T15:22:34Z Indexed on 2010/04/22 15:23 UTC
Read the original article Hit count: 273

Filed under:

css

|

rotate

|

image

|

layout

When I rotate a large image with CSS

    -moz-transform: rotate(270deg);

which sits in a floating div (using Firefox 3.6.3 to display the page), it messes up the page layout: Apparently, the size of the image is evaluated before it has been rotated.

Furthermore, the image is displaced, partly being out of the screen, because the point it is rotated about is fixed. How can I improve this? (-moz-transform-origin doesn't help here.)

© Stack Overflow or respective owner

Related posts about css

HTMLUNIT Facebook javascript warning

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I am trying to create simple application that would be able to search people on facebook using given e-mail. I am already able to log into an account using the HTMLunit tool and even create a page, which should throw result of my search. But when I try to print the result as XML the file is missing… >>> More
$this->headLink() includes duplicated script

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, Just like I did before, I used the following code for my new project. <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/button.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable… >>> More
How much multiple style sheets slow down to website?

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is 3 css file (one is only for IE) <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie… >>> More
mod_pagespeed is rewriting but not combining

as seen on Stack Overflow - Search for 'Stack Overflow'
I have the following problem. I installed mod_pagespeed but i am not getting the results i want! It does rewrite my css and changes the to the cache url but its not combining the css files. I have seached the web and stackoverflow for it but did not find a solution. Here are the tags <link… >>> More
CSS import or multiple CSS files

as seen on Stack Overflow - Search for 'Stack Overflow'
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional… >>> More

Related posts about rotate

Howto rotate image using jquery rotate plugin?

as seen on Stack Overflow - Search for 'Stack Overflow'
How do you rotate an image using jquery (www.jquery.com) rotate plugin (http://code.google.com/p/jquery-rotate/)? I have tried the following and it doesn't seem to work: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>View Photo</title> <script… >>> More
Font gets enlarged when rotating screen

as seen on Ask Ubuntu - Search for 'Ask Ubuntu'
I have a new ThinkPad X220 Tablet with Kubuntu 12.04. When I rotate the screen 90° with a script, the fonts of all programs that I open after the rotation have ugly huge fonts. #!/bin/sh # Find the line in "xrandr -q --verbose" output that contains current screen orientation and "strip" out… >>> More
Translate extrinsic rotations to intrinsic rotations ( Euler angles )

as seen on Game Development - Search for 'Game Development'
The problem I have is very frustrating: I am using the Jitter Physics library which gives Quaternion rotations, you can extract the extrinsic rotations but I need intrinsic rotations to rotate in OpenTK (There are other reasons as well so I don't want to make OpenTK use a Matrix) GL.Rotate(xr, 1… >>> More
Simulate Pivot Rotate Using Transform In SVG

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a rectangle in SVG that I need to rotate on a pivot from a specific point. The best way I can see to do this is transform to the xy of the pivot, rotate the degree, and then transform again. The problem is the xy of the second transform. I assume its going to take cos and sin to some extent… >>> More
Rotate point in rectangle

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a point in a rectangle that I need to rotate an arbitrary degree and find the x y of the point. How can I do this using javascript. Below the x,y would be something like 1,3 and after I pass 90 into the method it will return 3,1. |-------------| | * | | | | … >>> More