Question

我制作了一个3D立方体，当你点击立方体上的某个元素时，立方体顶部会显示一个div（大于立方体）。在这个div中有一些链接 - 问题是，正好位于多维数据集上方的链接部分不起作用。不在立方体上方的链接部分（它们位于右侧或左侧）可以完美地作为链接使用。我使用z-index来定位图层，我根本无法弄清楚出了什么问题。如果有人有建议，我会非常感激。

我在下面添加了我的代码 - 它非常广泛，所以我试图省略与该问题无关的元素。我不认为脚本应该是问题，但为了以防万一，我添加了与元素相关的代码。

谢谢

HTML：

<ul id="cube">
        <li class='face' id="facecubeone"></li>
        <li class='face' id="facecubetwo"></li>
        <li class='face' id="facecubethree"></li>
        <li class='face' id="facecubefour">
            <ul class="cube2 low oneleft" id="cubefour1">
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
            </ul>
            <ul class="cube2 high twoleft" id="cubefour2">
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
            </ul>
            <ul class="cube2 high threeleft activefour active" id="cubefour3">
                <li><a href="#" class='square' style="padding-top: 0px;"><img id="mig" src="img/cvbillede.jpg" width="100%" height="100%" alt="ABOUT ME"></img></a></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
            </ul>
            <ul class="cube2 high fourleft activefour active" id="cubefour4">
                <li><a href="#" class='square'>Choko-app<img class="smallpic" id="" src="img/choko.jpg" width="100" alt="picturesoftheapp"></a></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
            </ul>
            <ul class="cube2 high fiveleft" id="cubefour5">
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
            </ul>
            <ul class="cube2 low sixleft" id="cubefour6">
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
            </ul>
            <ul class="cube2 low sevenleft" id="cubefour7">
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
            </ul>
            <ul class="cube2 high eightleft" id="cubefour8">
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
            </ul>
            <ul class="cube2 high nineleft activefour active" id="cubefour9">
                <li><a href="#" class='square'>Visualization <img class="smallpic" id="" src="img/visual.jpg" width="100" alt="pictureofthesite"></a></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
                <li class='square'></li>
            </ul>
        </li>
        <li class='face'></li>
        <li class='face'></li>
    </ul>

<div id="myprojects">

      <div class="projects" id="projectme">
            <a href="#"><img class="exit" src="img/exit.png" alt="exit"></img></a>
            <div class="projecttext">
                <p class="titles">About me</p>
                <p class="descriptions" id="">
                TEXT
                </p>
                <div class="links" id=""><a href="DOCUMENT.pdf" target="_blank">LINK TO RESUME - only part of it works</a><br><a href="#" target="_blank">LINK TO LINKEDIN PROFILE</a></div>    
            </div>
            <img class="projectimages" id="" src="img/cvbillede.jpg" width="310px" height="310px" alt="pictureofme"></img>
        </div>
  </div>

CSS：

#cube {
position: fixed;
clear: both;
z-index: 900;
padding: 0;
width: 350px; height: 350px;
list-style: none;

/* centering */
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

-webkit-transform: rotate3d(-10, 30, -4, 47.5deg);
-webkit-transform-style: preserve-3d;
-webkit-animation: ani 8s infinite linear; }

.cube2 {
position: relative;
/*z-index: 901;*/
float: left;
margin: 0px;
padding: 0;
width: 116.63px; height: 116.63px; 
list-style: none;}

.face, #face {
box-sizing: border-box;
position: absolute;
top: 50%; left: 50%;
margin: -175px;
width: 350px; height: 350px;
background: black; }

.square {
box-sizing: border-box;
position: absolute;
margin-top: 0px;
margin-left: 0px;
padding: 0em;
width: 116.63px; height: 116.63px;
padding-top: 2.5px;
background-color: black;}

#myprojects {
clear: both;
position: absolute;
z-index: 9990;
width: 700px;
height: 400px;
    top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: none;}

.projects {
position: relative;
z-index: 9991;
width: 680px;
height: 380px;
padding: 10px;
display: none;

border: 2px solid black;
background: rgb(68,68,68); /* Old browsers */}

.exit { 
width: 20px;
height: 20px;
float: right;}

.projecttext {
clear: both;
position: relative;
z-index: 9992;
margin-top: 0px;
float: left;
height: 350px;
width: 370px;}

.titles {
margin-top: 0px;}

.descriptions {
margin-right: 10px;
height: 220px;
text-align: justify;}

.links a{
position: relative;
line-height: 26px;
z-index: 9999;}

.links a:hover {
}

.projectimages {
margin-top: 43px;
float: right;
width: 310px;}

SCRIPT：

    $(function(){       

var visible = false;    

    $('.exit').click(function(){
        $('#myprojects').fadeOut(1500);
        $('.projects').fadeOut(1500);           
        $('.square').attr('href', '#');                         
        $(".activenone").addClass('active');
        $(".active").removeClass('activenone'); 
        visible = false;
    });

        $('#cubefour3').click(function(){
        if (visible == false) {
            $('#myprojects').fadeIn(1500);
            $('#projectme').fadeIn(1500);
            $('.square').removeAttr("href");
            $(".active").addClass('activenone');
            $(".activenone").removeClass('active'); 
            visible = true;
        }
    });
    });

Answer 1

所以我终于开始工作了:)）

我已经对立方体中的6个边中的每个边应用了一个转换，使其看起来像3d，例如这样：

.face:nth-child(6) { 
    -webkit-transform: rotateX(-90deg) translateZ(175px); 
    -moz-transform: rotateY(-90deg) translateZ(175px);
    -ms-transform: rotateY(-90deg) translateZ(175px);
    -o-transform: rotateY(-90deg) translateZ(175px);
    transform: rotateY(-90deg) translateZ(175px);
}

translateZ以某种方式推翻了我放在它上面的div，所以链接不起作用。（虽然我没有解释这个）。然后我对新div进行了转换，如下所示：

.projects {
    -webkit-transform: translateZ(275px); 
    -moz-transform: translateZ(275px);
    -ms-transform: translateZ(275px);
    -o-transform:translateZ(275px);
    transform: translateZ(275px);
}

令人惊讶的是它现在似乎正在运作：）

当使用z-index放在另一个div之上时，div中的链接变为非活动状态

1 个答案: