Search code examples
jquerycssrotationcenter

CSS + jQuery: scale, center and rotate image along its container's rectangle

I'd like to do some tricky transformations with CSS (and jQuery, if necessary).

What I'd like to achieve:

  • I have a container with width/height either set by fixed pixel values or a percentage (example: blue rectangle, 600px x 1000px)

  • In this container, an image with known original dimensions (in my case, 1000px x 200px) should be

    • rotated around its own center (the + in the middle of the image) along the container's diagonal axis, and

    • placed in the container's center (vertical, horizontal), and

    • scaled to not exceed the container.

The result would look like this: enter image description here

Can a CSS/jQuery expert help me out on how to achieve this? Many thanks!

Solution

  • Should the result be static, or animated/responsive, depending on screen/box size?

    position: absolute;
top: 50%;
left: 50%;
translate3d(-50%, -50%, 0);
transform: rotate(66deg) translate3d(-50%, -50%, 0);
transform-origin: 0% 0%;

    To Rotate: transform: rotate(66deg);

    Centerpoint: transform-origin: 0% 0%;

    Center absolute container:

    position: absolute;
top: 50%;
left: 50%;
translate3d(-50%, -50%, 0);

    Static example: http://codepen.io/anon/pen/NGwozM

    :)