CODEWITHSUNDEEP
jquery
user2839873
user2839873

Reputation: 309

Jquery setting transform-origin to center

I'm having troubles with setting the transform-origin of a div to the center of the site.

This is what I have so far:

var xPos = ($(window).outerWidth() - $('#pointer').outerWidth())/2;
var yPos = ($(window).outerHeight() - $('#pointer').outerHeight())/2;

var xPosSTR = xPos+"px";
var yPosSTR = yPos+"px";

$('#pointer').css(
        {
        '-moz-transform-origin': 'xPosSTR yPosSTR',                
        'transform-origin':'xPosSTR yPosSTR',                   
        '-ms-transform-origin':'xPosSTR yPosSTR',                                
        '-webkit-transform-origin':'xPosSTR yPosSTR',
        });

I hope someone can help me :)

have a nice day!

Upvotes: 0

Views: 10316

Answers (4)

Tony
Tony

Reputation: 43

a bit late but here is your answer: set the container||image or what ever you want to rotate to:

div {position:fixed or absolute, then top:50%; left:50%;        transform:translate(-50%. -50%); }

Now append a class to the image||container lets call the class this

.rotateandcenterme {
transform: translate(-50%, -50%) rotate(90deg);
 }

I had this problem few years back, and eventually solved it like this.. remember to keep the translate() in-front of the rotate()

Upvotes: 0

Stefan Lindberg
Stefan Lindberg

Reputation: 603

I stumbled upon this thread. For anyone else trying to solve this with the original posters solution please include Zpx-value aswell (third parameter) and it will work with jQuery.

Example:

var xPosSTR = 200 + 'px';
var yPosSTR = 500 + 'px';

$('.element').css({
    'transform-origin':         xPosSTR + ' ' + yPosSTR + ' 0px',
    '-webkit-transform-origin': xPosSTR + ' ' + yPosSTR + ' 0px'
});

And forgive the ugly JS ;)

Upvotes: 3

Jean-François Beauchamp
Jean-François Beauchamp

Reputation: 5615

It is because you put single quotes around your xPosSTR and yPosSTR variables. The following code should work:

var xPos = ($(window).outerWidth() - $('#pointer').outerWidth())/2;
var yPos = ($(window).outerHeight() - $('#pointer').outerHeight())/2;

var xPosSTR = xPos+"px";
var yPosSTR = yPos+"px";

$('#pointer').css(
        {
        '-moz-transform-origin': xPosSTR + ' ' + yPosSTR,                
        'transform-origin': xPosSTR + ' ' + yPosSTR,                   
        '-ms-transform-origin': xPosSTR + ' ' + yPosSTR                 
        '-webkit-transform-origin': xPosSTR + ' ' + yPosSTR
        });

or a simpler version:

var xPos = ($(window).outerWidth() - $('#pointer').outerWidth())/2;
var yPos = ($(window).outerHeight() - $('#pointer').outerHeight())/2;

var origin = xPos + "px " + yPos + "px";

$('#pointer').css(
        {
        '-moz-transform-origin': origin,                
        'transform-origin': origin,                   
        '-ms-transform-origin': origin,                 
        '-webkit-transform-origin': origin
        });

Upvotes: 0

José Francisco
José Francisco

Reputation: 304

The transform origin accept % or property right,center and others

and in var xPosSTR = xPos+"px"; you have a PX. See the link: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

Upvotes: 1

Related Questions