[英]Set perspective-origin with jQuery .css()
I want to set dynamically with jQuery the css value of perspective-origin of a div. 我想用jQuery动态设置div透视图的CSS值。 It's an absolute div(popup) with dynamic top and left (depends of window size, scroll etc...).
这是一个绝对的div(popup),具有动态的顶部和左侧(取决于窗口大小,滚动等)。
When I open the popup I want to do an animation in css with transform: translateZ(-150px); 当我打开弹出窗口时,我想在CSS中使用以下转换制作动画:translateZ(-150px); But I have to set a perspective-origin as the center of the popup.
但是我必须将透视图原点设置为弹出窗口的中心。
In javacript i did the following code 在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 return 538.5px 3024.5px so that should work... console.log xyPos返回538.5px 3024.5px,这样应该可以工作...
When I inspect .popup-container I see no perspective-origin set. 当我检查.popup-container时,我没有看到透视图原点设置。
For info I allready try to set -webkit-perspective-origin but didn't work too. 对于信息,我已经准备尝试设置-webkit-perspective-origin,但是也没有用。
Does Jquery .css() methode handle perspective-origin? Jquery .css()方法是否处理透视图起源?
Thanks in advance for your answers. 预先感谢您的回答。
jQuery .css() method does handle perspective origin. jQuery .css()方法确实处理透视图原点。 For a quick reference that this feature works please check the source and you'll see perspective origin being set via style=""
有关此功能有效的快速参考,请检查源,您将看到通过style =“”设置了透视原点
http://jsfiddle.net/remix1201/d3hnpsgz/ http://jsfiddle.net/remix1201/d3hnpsgz/
HTML: HTML:
<div class="popup">This is a div class named popup.</div>
JS: (jQuery) JS:(jQuery)
var xypos = "10px 20px"
$(".popup").css("perspective-origin", xypos);
$(".popup").css("color", "blue");
If you would like to make a fiddle to implement your function then we can take a better look at just exactly what is going wrong with your script. 如果您想摆弄一下您的函数,那么我们可以更好地看一下脚本到底出了什么问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.