制作3D旋转导航综合练习题

最新推荐文章于 2020-10-06 09:03:05 发布

转载最新推荐文章于 2020-10-06 09:03:05 发布 · 545 阅读

本文介绍如何使用CSS3的transform和transition等属性实现一个具有3D旋转效果的下拉导航栏。该导航栏包括多个菜单项，每个菜单项都有前后两个面，通过鼠标悬停触发3D翻转动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小伙伴们，根据变形transform和过渡transition等内容，实现如下3D旋转动画下拉导航

案例在线演示地址：http://codepen.io/airen/pen/icFba

任务

1、通过CSS3的@font-face属性引入本地字体

2、调用自定义的字体

3、设置3D舞台布景

4、给3D舞台布景设置过渡动画效果

5、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果

6、给3D舞台中“.three-d-box”设置过渡与变形效果

7、给导航设置3D前，与3D后变形效果

8、设置导航当前状态与悬浮状态下的背景效果

9、显示下拉导航菜单，并其设置一个变形效果

?不会了怎么办

<!doctype www.dztcsd.com/html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作3D旋转导航</title>
<style>
@import url("http://www.w3cplus.com/demo/css3/base.css");
/*任务一：引入本地字体文件*/

body {
background-color:#edecec;
}

/* basic menu styles */
.nav-menu {
display: block;
background: #74adaa;
width:950px;
margin: 50px auto 150px;
}
.nav-menu > li {
display: inline;
float:left;
border-right:1px solid #94c0be;
}
.nav-menu > li:last-child {
border-right: none;
}
.nav-menu li a {
color: #fff;
display: block;
text-decoration: none;
/*调用本地字体*/

-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
text-transform: capitalize;
overflow: visible;
line-height: 20px;
font-size: 20px;
padding: 15px 30px 15px 31px;
}


.three-d {
/* 任务三、设置3D舞台布景 */

/*任务四、设置3D舞台布景过渡效果*/

position: relative;
}

.three-d:not(.active):hover {
cursor: pointer;
}

/*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/
.three-d:not(.active):hover .three-d-box,
.three-d:not(.active):focus .three-d-box {

}

.three-d-box {
/*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}

/*任务七、给导航设置3D前，与3D后变形效果*/
.front {

}

.back {

color: #FFE7C4;
}

.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #74adaa;
padding: 15px 30px 15px 31px;
color: white;
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*任务八、设置导航当前状态与悬浮状态下的背景效果*/
.nav-menu li .active .front,
.nav-menu li .active .back,
.nav-menu li a:hover .front,
.nav-menu li a:hover .back {

}
.nav-menu ul {
position: absolute;
text-align: left;
line-height: 40px;
font-size: 14px;
width: 200px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
-ms-transform-origin: 0px 0px;
-o-transform-origin: 0px 0px;
transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
/*任务九、显示下拉导航菜单，并其设置一个变形效果*/
.nav-menu > li:hover ul {
display: block;
}
</style>
</head>
<body>
<div id="nav">
<ul class="nav-menu clearfix unstyled">
<li><a href="#" class="three-d active">
Home
HomeHome
</a></li>
<li><a href="#" class="three-d">
Services
ServicesServices
</a></li>
<li><a href="#" class="three-d">
Products
ProductsProducts
</a></li>
<li><a href="#" class="three-d">
About
AboutAbout
</a></li>
<li><a href="#" class="three-d">
Contact
ContactContact
</a></li>
<li><a href="#" class="three-d">
Blog
BlogBlog</a>
<ul class="clearfix unstyled drop-menu">
<li><a href="#" class="three-d">
Html5
Html5Html5
</a></li>
<li><a href="#" class="three-d">
Css3
Css3Css3
</a></li>
<li><a href="#" class="three-d">
JavaScript
JavaScriptJavaScript
</a></li>
<li><a href="#" class="three-d">
Videogames
VideogamesVideogames
</a></li>
</ul>
</li>
<li><a href="#" class="three-d">
Shop On-line
Shop On-lineShop On-line
</a></li>
</ul>
</div>
</body>
</html>