Question

我将div的transform-origin设置为站点的中心时遇到了麻烦。

这是我到目前为止所做的：

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

我希望有人可以帮助我:)。

度过愉快的一天！

Answer 1

我偶然发现了这个帖子。对于其他试图用原始海报解决方案来解决这个问题的人，请包括Zpx-value aswell（第三个参数），它将适用于jQuery。

示例：

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

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

原谅丑陋的JS;）

Answer 2

转换来源接受％或财产权利，中心和其他

并且var xPosSTR = xPos+"px";你有一个PX。请参阅链接：https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

Answer 3

这是因为你在xPosSTR和yPosSTR变量周围放了单引号。以下代码应该有效：

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

或更简单的版本：

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

Jquery将transform-origin设置为center

3 个答案: