我该如何将这个动态创建的3D对象放在它的父级上? [英] How can I center this dynamically created 3d object on it's parent?
本文介绍了我该如何将这个动态创建的3D对象放在它的父级上?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
从截图中可以看出,回转。理想情况下,我甚至不必为容器指定高度或宽度。
我该如何做到这一点?
以下是重要的代码:
函数RotaMenu(el){
this.element = el;
this.rotationX = 0;
this.rotationY = 0;
this.panelCount = 0;
this.menuHeight = 0;
this.theta = 0;
this.radius = 0;
}
RotaMenu.prototype.update = function(){
this.panelCount = this.element.children()。length;
this.menuHeight = $(this.element).outerHeight();
this.panelSize = $(this.element).children()。first()。outerHeight();
this.theta = 360 / this.panelCount;
if($('input [name = whichSize]:checked')。val()=='p'){
this.radius = Math.round((this.panelSize / 2)/ Math.tan(Math.PI / this.panelCount));
} else {
this.radius = Math.round((this.menuHeight / 2)/ Math.tan(Math.PI / this.panelCount));
}
var m = this;
$(this.element).children()。each(function(i){
var angle = m.theta * i;
$(this).css('transform', 'rotateX('+ angle +'deg)translateZ('+ m.radius +'px)');
});
$(this.element).css('transform','translateZ('+ this.radius +'px)'+'rotateX('+ this.rotationX +'deg)rotateY('+ this.rotationY +'deg)');
$('#labelc')。text('Panels:'+ this.panelCount);
};
和相关的CSS:
.menu-container {
position:absolute;
perspective:1000px;
display:flex;
align-items:center;
justify-content:center;
width:200px;
height:100px;
剩下:50%;
margin-left:-100px;
top:50%;
margin-top:-150px;
}
.menu {
transform-style:preserve-3d;
位置:绝对;
转换:.1s;
宽度:100%;
身高:100%;
transform-origin:50%;
background-color:rgba(0,0,0,.15);
}
.menu div {
border:1px solid green;
padding:10px;
位置:绝对;
解决方案
您可以尝试添加这些属性为.menu div:
top:50%;
剩下:50%;
transform:translate(-50%,-50%);
由于您的位置结构复杂,因此请务必测试兼容性问题。
Here is the fiddle. Here is a screenshot:
It's obvious from the screenshot, but even more when you start applying some rotation. Ideally I wouldn't even have to specify a height or width for the container.
How can I accomplish this?
Here is the important code:
function RotaMenu ( el ) {
this.element = el;
this.rotationX = 0;
this.rotationY = 0;
this.panelCount = 0;
this.menuHeight = 0;
this.theta = 0;
this.radius = 0;
}
RotaMenu.prototype.update = function() {
this.panelCount = this.element.children().length;
this.menuHeight = $(this.element).outerHeight();
this.panelSize = $(this.element).children().first().outerHeight();
this.theta = 360 / this.panelCount;
if ($('input[name=whichSize]:checked').val() == 'p') {
this.radius = Math.round( ( this.panelSize / 2) / Math.tan( Math.PI / this.panelCount ) );
} else {
this.radius = Math.round( ( this.menuHeight / 2) / Math.tan( Math.PI / this.panelCount ) );
}
var m = this;
$(this.element).children().each(function(i) {
var angle = m.theta * i;
$(this).css('transform','rotateX(' + angle + 'deg) translateZ(' + m.radius + 'px)');
});
$(this.element).css('transform','translateZ(' + this.radius + 'px) ' + 'rotateX(' + this.rotationX + 'deg) rotateY(' + this.rotationY + 'deg)');
$('#labelc').text('Panels: ' + this.panelCount);
};
And the relevant CSS:
.menu-container {
position: absolute;
perspective: 1000px;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 100px;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -150px;
}
.menu {
transform-style: preserve-3d;
position: absolute;
transition: .1s;
width: 100%;
height: 100%;
transform-origin: 50%;
background-color: rgba(0,0,0,.15);
}
.menu div {
border: 1px solid green;
padding: 10px;
position: absolute;
}
解决方案
You could try to add these attributes to .menu div:
top: 50%; left: 50%; transform: translate(-50%, -50%);
Because of the complex position structure that you have, make sure to test compatibility issues.
这篇关于我该如何将这个动态创建的3D对象放在它的父级上?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文