我目前成功地制作了一些接近我想要的東西 -單擊此處，但它看起來仍然如此蹩腳和不切實際。我想讓它像一個導航欄，您可以在其中看到徽標，并將其懸停在 3D 旋轉上，并且鏈接從底部顯示?？雌饋砗茉愀?，我不知道出了什么問題。這是我的代碼：.navbar { position: fixed; width: 500px; height: 80px; background: red; text-align: center; top: 20px; left: 50%; transform: translateX(-50%); z-index: 100;}.navbar .logo_side { position: absolute; width: 100%; height: 100%; background: blue; box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3); transform-origin: top; transition: 1s ease-in;}.navbar .logo_side img { height: 100%;}.navbar:hover > .logo_side { transform: rotateX(90deg); transition: 1s ease-out;}.navbar .links_side { position: absolute; width: 100%; height: 100%; background: orange; box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3); transform: rotateX(90deg); transform-origin: bottom; transition: 1s ease-out;}.navbar .links_side a { }.navbar:hover > .links_side { transform: rotateX(0deg); transition: 1s ease-in;}<div class="navbar"> <div class="logo_side"> <h1 style="color: white;">MY LOGO</h1> </div> <div class="links_side"> <a href="/" class="active">Home</a> <a href="limbook.php">About</a> <a href="contact_us.php">Contact Us</a> </div></div>例如，它目前如圖 1 所示，我希望得到如圖 2 所示的內容：
1 回答
HUWWW
TA貢獻1874條經驗 獲得超12個贊
我在 codpen 上找到了這個并對其進行了一些修改，看看它是否可以應用于您的代碼
var cube = document.querySelector('.cube');
var currentClass = '';
var side = "front";
function changeSide() {
side = side == "front" ? "top" : "front";
var showClass = 'show-' + side;
if (currentClass) {
cube.classList.remove(currentClass);
}
cube.classList.add(showClass);
currentClass = showClass;
}
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.scene {
width: 200px;
height: 200px;
border: 1px solid #CCC;
margin: 80px;
perspective: 400px;
}
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: transform 1s;
}
.cube.show-front {
transform: translateZ(-100px) rotateY( 0deg);
}
.cube.show-top {
transform: translateZ(-100px) rotateX( -90deg);
}
.cube__face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid black;
line-height: 200px;
font-size: 40px;
font-weight: bold;
color: white;
text-align: center;
}
.cube__face--front {
background-color: red;
}
.cube__face--top {
background-color: blue;
}
.cube__face--front {
transform: rotateY( 0deg) translateZ(100px);
}
.cube__face--top {
transform: rotateX( 90deg) translateZ(100px);
}
label {
margin-right: 10px;
}
<div class="scene">
<div class="cube" onmouseover="changeSide()">
<div class="cube__face cube__face--front">front</div>
<div class="cube__face cube__face--top">top</div>
</div>
</div>
- 1 回答
- 0 關注
- 135 瀏覽
添加回答
舉報
0/150
提交
取消