0

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;}

脚本：

    $(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;
        }
    });
    });
4

1 に答える 1

0

だから私はついにそれを働かせました:)

立方体の 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);
}

驚くべきことに、現在は機能しているようです:)

于 2013-04-17T12:36:00.387 に答える