使用 jQuery .css() 设置透视原点答案

【问题标题】：Set perspective-origin with jQuery .css()使用 jQuery .css() 设置透视原点
【发布时间】：2014-09-30 16:20:05
【问题描述】：

我想用 jQuery 动态设置一个 div 的 perspective-origin 的 css 值。这是一个具有动态顶部和左侧的绝对 div（弹出窗口）（取决于窗口大小、滚动等...）。

当我打开弹出窗口时，我想用 css 做一个动画变换：translateZ（-150px）；但我必须将透视原点设置为弹出窗口的中心。

在 javacript 中我做了以下代码

center: function () {

        var $popup = this.$( '.popup' );
        var $popupOverlay = this.$( '.popup-overlay' );
        var wWidth = $( window ).width();
        var wHeight = $( window ).height();
        var dHeight = $( document ).height();
        var popupWidth = $popup.width();
        var popupHeight = $popup.height();

        // Popup centered in the window at the scroll position
        var popupTop = ( wHeight / 2 ) - ( popupHeight / 2 ) + $( document ).scrollTop();
        var popupLeft = ( wWidth / 2 ) - ( popupWidth / 2 );

        // If the popup height bigger than window height then the popup is not centered in the window but sticked at top
        if ( popupHeight > wHeight ) {
            popupTop += ( popupHeight - wHeight ) / 2;
        }

        // Set popupOverlay with and height as the document
        $popupOverlay.width( wWidth );
        $popupOverlay.height( dHeight );

        // Set calculated top and left offset to the popup
        $popup.css( {
            'left': popupLeft,
            'top': popupTop
        } );

        // Now calculate the transform-origin center of the popup
        var xPos = popupLeft + popupWidth / 2 + 'px';
        var yPos = popupTop + popupHeight / 2 + 'px';
        var xyPos = xPos + ' ' + yPos;
        console.log(xyPos);

        // Set calculated transform-origin to the parent

        this.$( '.popup-container' ).css( {
            'perspective-origin': xyPos
        } );
    }

console.log xyPos 返回 538.5px 3024.5px 所以应该可以工作...

当我检查 .popup-container 时，我看不到透视原点集。

对于信息，我已经尝试设置 -webkit-perspective-origin 但也没有用。

Jquery .css() 方法是否处理透视原点？

提前感谢您的回答。

【问题讨论】：

标签： javascript jquery css popup webkit-perspective

【解决方案1】：

jQuery .css() 方法确实处理透视原点。有关此功能有效的快速参考，请检查源代码，您将看到通过 style=""

设置透视原点

http://jsfiddle.net/remix1201/d3hnpsgz/

HTML：

<div class="popup">This is a div class named popup.</div>

JS: (jQuery)

var xypos = "10px 20px"
$(".popup").css("perspective-origin", xypos);
$(".popup").css("color", "blue");

如果您想制作一个小提琴来实现您的功能，那么我们可以更好地了解您的脚本到底出了什么问题。

【讨论】：