How can I translate with webkit-transform enough so that


Tags: javascript,html,css,iframe,webkit

Problem :

I am using webkit-transform: scale(zoomFactor,zoomFactor) in css to zoom the contents of an iframe. When I zoom it to the proper size to fit inside the iframe, the positioning of the elements is offset like this: diagram I cannot figure out how to find the x and y I would need to offset it to get it so that the contents of the iframe appear to be in the same corner as before it was scaled. The amount the contents are offset depend on how large or small the scalefactor is. Does anyone know how I can get this to work?



Solution :

by using transforms you can set the transform origin.

In your case you want to scale to the top left.

so the origin should not be default (center) but at 0px left and 0px top.

-webkit-transform-origin:0px 0px;

    CSS Howto..

    How to change from one stylesheet to another with jQuery?

    How to make a main div appear next to a sidebar

    Why the space after the table, and how to remove it?

    How to create a custom shape - css

    how to create horizontal drop-down menu with javascript for asp.net website?

    How to make a diagonal css gradient without the colors blending together(a sharp color change) that's displaced 70% to the right?

    Restricted to CSS-2.1, can I ensure that one border in a table shows 'on top' of another border when borders are collapsed

    How i can make a dynamic css class without use of id?

    How to make CSS NOT do something [duplicate]

    How do I make a text input non-editable?

    How to prevent a p:menubar from being overlapped by the contents of a CSS template?

    How to conditionally load CSS and extend it using SASS/SCSS

    css 3d perspective not showing up correctly in certain browsers

    how to i target a another div with jquery or css

    How to add slide animation when showing elements

    How to keep top of element static while bottom is dynamic. -CSS

    How to add text to a CSS Sprite

    How do I add a CSS class to an element from CSS (not jquery nor javascript)?

    How to make text box scroll vertical in overflow css html?

    How the browser identifies the CSS framework? [closed]

    How to use CSS on an Html.ActionLink in C#

    How to strech vertically the container of inline-blocks?

    How to center image while also aligning text to the right of image?

    CSS print stylesheet generated content not showing up

    css div and span display differently in browsers. How to unify?

    How to hide element label by element id in CSS?

    How to write HTML, CSS and Javascript all together in Joomla 2.5 article? [closed]

    How do you align the vertical center of text to the vertical center of an image?

    How to display visual rows and cols in textarea using css

    How to use conditional CSS In CakePHP 2.x?