Jquery setting transform-origin to center

Question

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).outerWid         


        

Answer 1

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 ;)

Answer 2

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

Answer 3

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
        });