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

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