0

我在将 div 的变换原点设置为站点中心时遇到了麻烦。

这是我到目前为止所拥有的：

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

我希望有一个人可以帮助我 ：）

祝你今天过得愉快！

4

3 回答 3

3

我偶然发现了这个线程。对于其他尝试使用原始海报解决方案解决此问题的人，请同时包含 Zpx-value（第三个参数），它将与 jQuery 一起使用。

例子：

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

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

并原谅丑陋的 JS ;)

于 2015-02-24T13:52:12.027 回答
1

变换原点接受 % 或产权、中心等

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

于 2013-10-02T18:38:59.513 回答
0

这是因为您在 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
        });
于 2016-03-16T22:50:01.677 回答