探索前端新境界：HTML5/CSS3 高级主题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 3D 旋转导航栏示例</title>
<style>
body, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
width: 100%;
perspective: 600px;
}
.nav > ul {
width: 100%;
height: 100vh;
transform-style: preserve-3d;
transition: transform 1s;
}
.nav > ul > li {
width: 100%;
height: 100%;
position: relative;
transform-origin: center center -50vh;
transform: rotateX(90deg) translateZ(-50vh);
}
.nav > ul > li > a {
display: block;
width: 100%;
height: 100%;
line-height: 100vh;
text-align: center;
color: white;
text-decoration: none;
}
.nav > ul > li:nth-child(1) > a { background: #3498db; }
.nav > ul > li:nth-child(2) > a { background: #2ecc71; }
.nav > ul > li:nth-child(3) > a { background: #9b59b6; }
.nav > ul > li:nth-child(4) > a { background: #e67e22; }
.nav > ul > li:nth-child(5) > a { background: #e74c3c; }
.nav > ul > li:nth-child(6) > a { background: #1c9090; }
/* 鼠标悬浮样式 */
.nav:hover > ul {
transform: rotateX(90deg) rotateY(90deg) translateZ(-50vh);
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">产品</a>
</li>
<li>
<a href="#">关于</a>
</li>
<li>
<a href="#">联系</a>
</li>
<li>
<a href="#">博客</a>
</li>
<li>
<a href="#">更多</a>
</li>
</ul>
</div>
</body>
</html>这个简单的HTML和CSS3代码示例展示了如何使用3D转换制作一个旋转的导航栏。当鼠标悬浮时，导航栏旋转90度并呈现出一个新的视角。这个例子可以教会开发者如何将3D转换和交互效果融合到网页设计中，增强用户体验。
评论已关闭