1. 首頁
  2. 問答
  3. CSS轉換傳承問題

CSS轉換傳承問題

2016-01-23 274 views
3

以下HTML5和CSS3動畫是給我兩個不同的問題，我已經無法找到以前的答案已在我的代碼工作的問題。我很好奇，如果我在這裏做了完全錯誤的事情。CSS轉換傳承問題

我已經嘗試瞭解決方案in this question，並this one沒有結果。

的兩個問題： 1）月亮軌道變換細;作爲一個孩子的元素，月球也發生了變化。我試圖應用相反的轉換，但似乎沒有任何效果。

2）我試圖讓月球進入地球的後面改變的z-index。軌道邊界是暫時的，所以不用擔心，但無論我設置z-index如何，我都無法獲得效果。

Edit in JSFiddle HTML CSS html {} body { 
 
    height: 100%; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    margin-top: 300px; 
 
    background-color: #143856; 
 
} 
 
.moonorbit { 
 
    position: relative; 
 
    top: -249px; 
 
    left: 309px; 
 
    width: 500px; 
 
    height: 500px; 
 
    border: 2px solid white; 
 
    border-radius: 50%; 
 
    -moz-transform: rotateX(75deg); 
 
    -webkit-transform: rotateX(75deg); 
 
    -o-transform: rotateX(75deg); 
 
    -ms-transform: rotateX(75deg); 
 
    transform: rotateX(75deg); 
 
} 
 
.mooncontainer { 
 
    position: absolute; 
 
    top: 175px; 
 
    left: 175px; 
 
    width: 150px !important; 
 
    height: 150px; 
 
    -moz-transform: rotateX(-75deg); 
 
    -webkit-transform: rotateX(-75deg); 
 
    -o-transform: rotateX(-75deg); 
 
    -ms-transform: rotateX(-75deg); 
 
    transform: rotateX(-75deg); 
 
    animation: moon-orbit 10s linear infinite; 
 
} 
 
.moon { 
 
    width: 150px !important; 
 
    height: 150px; 
 
    border-radius: 50%; 
 
    background: red url(img/planets_MOON.png) no-repeat; 
 
    background-size: cover; 
 
    animation: rotate 10s linear infinite; 
 
} 
 
.earth { 
 
    position: absolute; 
 
    width: 417px; 
 
    top: 100px; 
 
    left: 350px; 
 
    z-index: 0; 
 
    height: 209px; 
 
} 
 
.earth .planet { 
 
    /*width: 417px !important; 
 
\t \t \t height: 417px;*/ 
 
    width: 300px !important; 
 
    height: 300px; 
 
    background: yellow url(img/planets_EARTH.png) no-repeat; 
 
    background-size: cover; 
 
    border-radius: 50%; 
 
    margin: 0 auto; 
 
} 
 
/*Moon Orbit*/ 
 

 
@keyframes moon-orbit { 
 
    0% { 
 
    transform: rotateZ(0deg) translateX(250px); 
 
    } 
 
    100% { 
 
    transform: rotateZ(360deg) translateX(250px); 
 
    } 
 
} 
 
@keyframes rotate { 
 
    0% { 
 
    z-index: 5; 
 
    transform: rotateZ(0deg); 
 
    } 
 
    25% { 
 
    z-index: -5; 
 
    } 
 
    50% { 
 
    z-index: -5; 
 
    } 
 
    75% { 
 
    z-index: 5; 
 
    } 
 
    100% { 
 
    z-index: 5; 
 
    transform: rotateZ(-360deg); 
 
    } 
 
}
<body> 
 
    <div class="earth"> 
 
    <div class="planet"></div> 
 
    </div> 
 
    <div class="moonorbit"> 
 
    <div class="mooncontainer"> 
 
     <div class="moon"></div> 
 
    </div> 
 
    </div> 
 
</body>

來源

2016-01-23 Sgiobair

回答

2

關於你的第一個問題，你所申請的技術確定。但有2個轉換，你需要糾正，從圓的動畫，你已經做了，並從軌道傾角（旋轉X（75deg）

這將是你的演示與校正應用

body { 
 
    height: 60%; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    margin-top: 300px; 
 
    background-color: #143856; 
 
} 
 
.moonorbit { 
 
    position: relative; 
 
    top: -300px; 
 
    left: 209px; 
 
    width: 500px; 
 
    height: 500px; 
 
    border: 2px solid white; 
 
    border-radius: 50%; 
 
    transform: rotateX(75deg); 
 
    transform-style: preserve-3d; 
 
} 
 
.mooncontainer { 
 
    position: absolute; 
 
    top: 175px; 
 
    left: 175px; 
 
    width: 150px !important; 
 
    height: 150px; 
 
    -webkit-transform: rotateX(-75deg); 
 
    transform: rotateX(-75deg); 
 
    animation: moon-orbit 10s linear infinite; 
 
    transform-style: preserve-3d; 
 
} 
 
.moon { 
 
    width: 150px !important; 
 
    height: 150px; 
 
    border-radius: 50%; 
 
    background-color: white; 
 
    background-size: cover; 
 
    animation: rotate 10s linear infinite; 
 
    transform-style: preserve-3d; 
 
} 
 
.earth { 
 
    position: absolute; 
 
    width: 417px; 
 
    top: 100px; 
 
    left: 250px; 
 
    z-index: 0; 
 
    height: 209px; 
 
} 
 
.earth .planet { 
 
    /*width: 417px !important; 
 
\t \t \t height: 417px;*/ 
 
    width: 300px !important; 
 
    height: 300px; 
 
    background-color: lightgreen; 
 
    background-size: cover; 
 
    border-radius: 50%; 
 
    margin: 0 auto; 
 
} 
 
/*Moon Orbit*/ 
 

 
@keyframes moon-orbit { 
 
    0% { 
 
    transform: rotateZ(0deg) translateX(250px); 
 
    } 
 
    100% { 
 
    transform: rotateZ(360deg) translateX(250px); 
 
    } 
 
} 
 
@keyframes rotate { 
 
    0% { 
 
    transform: rotateZ(0deg) rotateX(-75deg); /* added rotateX(-75deg) to compensate */ 
 
    } 
 
    100% { 
 
    transform: rotateZ(-360deg) rotateX(-75deg); 
 
    } 
 
}
<div class="earth"> 
 
    <div class="planet"></div> 
 
    </div> 
 
    <div class="moonorbit"> 
 
    <div class="mooncontainer"> 
 
     <div class="moon"></div> 
 
    </div> 
 
    </div>

關於第二個問題，最好的辦法是到工作的所有時間在3D中，所以它會自動解決。這使得它更簡單的另一種技術是鏈在我的演示中，我已經鏈接了所有東西，所以它更容易獲得合作伙伴ntrol（和你有一個簡單的HTML

body { 
 
    height: 60%; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    background-color: #143856; 
 
} 
 
.moon { 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 50%; 
 
    background: url(http://i.stack.imgur.com/L3IE5.jpg); 
 
    background-size: 120%; 
 
    background-position: center center; 
 
    animation: rotate 10s linear infinite; 
 
    transform-style: preserve-3d; 
 
    margin: auto; 
 
    position: absolute; 
 
    left: 0px; 
 
    right: 0px; 
 
    top: 0px; 
 
    bottom: 0px; 
 
} 
 
.earth { 
 
    position: absolute; 
 
    width: 300px; 
 
    height: 300px; 
 
    background: url(http://i.stack.imgur.com/5sqwZ.jpg); 
 
    background-size: 140%; 
 
    background-position: center center; 
 
    border-radius: 50%; 
 
    margin: 100px 200px; 
 
    perspective: 1500px; 
 
    transform-style: preserve-3d; 
 
} 
 

 
@keyframes rotate { 
 
    0% { 
 
    transform: rotateX(-75deg) rotateZ(0deg) translateX(300px) rotateZ(0deg) rotateX(75deg); 
 
    } 
 
    100% { 
 
    transform: rotateX(-75deg) rotateZ(-360deg) translateX(300px) rotateZ(360deg) rotateX(75deg); 
 
    } 
 
}
<div class="earth"> 
 
     <div class="moon"></div> 
 
    </div>

earth moon

來源

2016-01-23 12:33:47 vals

1

試圖用z-index解決這個問題將以失敗告終70％所有的時間。大聲笑看看我在那裏做了什麼？無論如何，你最好的選擇是用關鍵幀做到這一點。創建一個關鍵幀來繪製你的路徑，說實話，你需要其他的東西，需要一段時間來解釋，但如何將我的代碼發佈在這裏和DEMO，你將能夠看到差異？

HTML

<div id="universe" class="scale-stretched"> 
    <div id="solar-system" class="earth"> 
     <div id="earth" class="orbit"> 
     <div class="pos"> 
      <div class="planet"> </div> 
     </div> 
     </div> 
     <div id="sun"> </div> 
    </div> 
</div>

CSS

#universe { 
    z-index: 1; 
    position: absolute; 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    background-position: center 40%; 
    background-repeat: no-repeat; 
    background-size: cover; } 

#solar-system { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    transform-style: preserve-3d; } 

.orbit { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 50%; 
    transform-style: preserve-3d; 
    animation-name: orbit; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; } 

.orbit .orbit { 
    animation-name: suborbit; } 

.pos { 
    position: absolute; 
    top: 50%; 
    width: 2em; 
    height: 2em; 
    margin-top: -1em; 
    margin-left: -1em; 
    transform-style: preserve-3d; 
    animation-name: invert; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; } 

#sun, .planet, #earth{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 1em; 
    height: 1em; 
    margin-top: -0.5em; 
    margin-left: -0.5em; 
    border-radius: 50%; 
    transform-style: preserve-3d; } 

#sun { 
    background-color: #FB7209; 
    background-repeat: no-repeat; 
    background-size: cover; 
    box-shadow: 0 0 60px rgba(255, 160, 60, 0.4); } 

.planet { 
    background-color: #202020; 
    background-repeat: no-repeat; 
    background-size: cover; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; } 

.ring { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    border-radius: 50%; } 

#earth { 
    z-index: 8; } 

#sun { 
    z-index: 1; } 


@keyframes orbit { 
    0% { 
    transform: rotateZ(0deg); } 

    100% { 
    transform: rotateZ(-360deg); } } 

@keyframes invert { 
    0% { 
    transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); } 

    100% { 
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } } 

.view-3D #solar-system { 
    transform: rotateX(75deg); } 

.view-3D #sun { 
    transform: rotateX(-90deg); } 

#earth .pos, 
#earth .planet, 
#earth.orbit { 
    animation-duration: 12.00021s; } 

#earth .orbit .pos, 
#earth .orbit { 
    animation-duration: 0.89764s; } 

.scale-stretched #sun { 
    font-size: 24em; } 

.scale-stretched #earth .planet { 
    font-size: 3.92em; } 

.scale-stretched #earth.orbit { 
    width: 56em; 
    height: 56em; 
    margin-top: -28em; 
    margin-left: -28em; } 


body { background: #000; } 

#sun { background: yellow; } 

#earth .planet { background: blue; }

和一些簡單的jQuery來獲得3D效果，所以它看起來2D但移動3D

$(window).load(function(){ 
    var body = $("body"), 
     universe = $("#universe"), 
     solarsys = $("#solar-system"); 

    var init = function() { 
    body.removeClass('view-2D opening').addClass("view-3D").delay(2000).queue(function() { 
     $(this).removeClass('hide-UI').addClass("set-speed"); 
     $(this).dequeue(); 
    }); 
    }; 

    init(); 
});

下面是一個DEMO

我想如果你使用我的代碼，你可能會比修復你的代碼更好。只是一個建議;）

來源

2016-01-23 04:08:02 LOTUSMS

相關問題

 相關問題