Javascript 使用jQuery.css()设置透视原点
我想用jQuery动态设置一个div的透视原点的css值。它是一个绝对div(弹出窗口),具有动态的顶部和左侧(取决于窗口大小、滚动等) 当我打开弹出窗口时,我想用css制作一个动画 变换:translateZ(-150px);但是我必须设置一个透视原点作为弹出窗口的中心 在JavaScript中,我执行了以下代码Javascript 使用jQuery.css()设置透视原点,javascript,jquery,css,popup,webkit-perspective,Javascript,Jquery,Css,Popup,Webkit Perspective,我想用jQuery动态设置一个div的透视原点的css值。它是一个绝对div(弹出窗口),具有动态的顶部和左侧(取决于窗口大小、滚动等) 当我打开弹出窗口时,我想用css制作一个动画 变换:translateZ(-150px);但是我必须设置一个透视原点作为弹出窗口的中心 在JavaScript中,我执行了以下代码 center: function () { var $popup = this.$( '.popup' ); var $popupOverlay =
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容器时,我没有看到透视原点集
关于信息,我已经准备好设置-webkit透视图原点,但也不起作用
Jquery.css()方法处理透视原点吗
提前感谢您的回答。jQuery.css()方法处理透视原点。有关此功能工作的快速参考,请检查源代码,您将看到通过style=“”设置透视原点
HTML:
如果你想做一个小提琴来实现你的功能,那么我们可以更好地看看你的脚本到底出了什么问题
<div class="popup">This is a div class named popup.</div>
var xypos = "10px 20px"
$(".popup").css("perspective-origin", xypos);
$(".popup").css("color", "blue");