3D旋转导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@import url("http://www.w3cplus.com/demo/css3/base.css");
@font-face {
font-family: 'sansationregular';
src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot');
src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot?#iefix') format('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/embedded-opentype'),
url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.woff') format('woff'),
url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.ttf') format('truetype'),
url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.svg#sansationregular') format('svg');
font-weight: normal;
font-style: normal;
}
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;
font-family: 'sansationregular';
-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;
}
/* animation domination */
.three-d {
-webkit-perspective: 200px;
-moz-perspective: 200px;
-ms-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
-webkit-transition: all .07s linear;
-moz-transition: all .07s linear;
-ms-transition: all .07s linear;
-o-transition: all .07s linear;
transition: all .07s linear;
position: relative;
}
.three-d:not(.active):hover {
cursor: pointer;
}
.three-d:not(.active):hover .three-d-box,
.three-d:not(.active):focus .three-d-box {
-wekbit-transform: translateZ(-25px) rotateX(90deg);
-moz-transform: translateZ(-25px) rotateX(90deg);
-o-transform: translateZ(-25px) rotateX(90deg);
-ms-transform: translateZ(-25px) rotateX(90deg);
transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
-webkit-transform: translatez(-25px);
-moz-transform: translatez(-25px);
-ms-transform: translatez(-25px);
-o-transform: translatez(-25px);
transform: translatez(-25px);
-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%;
}
.front {
-webkit-transform: rotatex(0deg) translatez(25px);
-moz-transform: rotatex(0deg) translatez(25px);
-ms-transform: rotatex(0deg) translatez(25px);
-o-transform: rotatex(0deg) translatez(25px);
transform: rotatex(0deg) translatez(25px);
}
.back {
-webkit-transform: rotatex(-90deg) translatez(25px);
-moz-transform: rotatex(-90deg) translatez(25px);
-ms-transform: rotatex(-90deg) translatez(25px);
-o-transform: rotatex(-90deg) translatez(25px);
transform: rotatex(-90deg) translatez(25px);
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 {
background-color: #51938f;
-webkit-background-size: 5px 5px;
background-size: 5px 5px;
background-position: 0 0, 30px 30px;
background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
}
.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;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
</head>
<body>
<div id="nav">
<ul class="nav-menu clearfix unstyled">
<li><a href="#" class="three-d active">
Home
<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
</a></li>
<li><a href="#" class="three-d">
Services
<span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
</a></li>
<li><a href="#" class="three-d">
Products
<span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span>
</a></li>
<li><a href="#" class="three-d">
About
<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
</a></li>
<li><a href="#" class="three-d">
Contact
<span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
</a></li>
<li><a href="#" class="three-d">
Blog
<span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
</a>
<ul class="clearfix unstyled drop-menu">
<li><a href="#" class="three-d">
Html5
<span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span>
</a></li>
<li><a href="#" class="three-d">
Css3
<span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span>
</a></li>
<li><a href="#" class="three-d">
JavaScript
<span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>
</a></li>
<li><a href="#" class="three-d">
Videogames
<span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span>
</a></li>
</ul>
</li>
<li><a href="#" class="three-d">
Shop On-line
<span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span>
</a></li>
</ul>
</div>
</body>
</html>
相关推荐
本案例中，我们关注的是"css3超酷3D旋转导航菜单特效"，这是一个利用CSS3 3D Transforms技术实现的创新性交互设计。这个特效使得网站的导航菜单在用户悬停时展现出立体的旋转效果，增强了用户体验和视觉吸引力。 ...
在IT行业中，3D旋转导航是一种独特且引人入胜的用户界面设计，它为用户提供了一种新颖的方式来浏览和操作应用程序或网站的层级结构。这种技术常见于移动应用、游戏以及高级网页设计中，旨在提升用户体验，使界面更加...
Android 3D圆形旋转菜单Android 3D圆形旋转菜单Android 3D圆形旋转菜单Android 3D圆形旋转菜单Android 3D圆形旋转菜单Android 3D圆形旋转菜单Android 3D圆形旋转菜单Android 3D圆形旋转菜单
【标题】"3D旋转+SVG路径动画特效.rar"是一个包含高级前端开发技术的资源包，专注于使用jQuery、CSS和SVG实现动态3D旋转及路径动画效果。这种特效在现代网页设计中广泛应用，能为用户提供丰富的视觉体验和交互性。 ...
【3D旋转幻灯Banner焦点图js代码】是一种在网页设计中常见的动态效果，用于吸引用户的注意力并展示重要信息或产品。它通过JavaScript（js）编程实现，利用3D视觉效果来增强幻灯片的过渡动画，使得网页的交互体验更加...
"3D球状旋转旋转tag"是一个特定的术语，它可能指的是在一个应用或项目中，标签（tag）以3D球形布局进行动态旋转展示的技术。这种效果通常用于创建引人注目的视觉体验，比如在信息展示、数据可视化或者导航菜单中。 ...
在“2.fla”这个文件中，我们可以看到一个具体的3D旋转导航实例，它是如何将3D元素与交互功能结合在一起的。 二、Flash3D实现原理 1. ActionScript 3.0：Flash3D导航的核心在于ActionScript 3.0，这是Flash开发的...
"圆形旋转导航菜单"就是一种独特且创新的交互设计方式，它结合了美学与实用性，使得用户能够更加直观地浏览和访问应用程序或网站的各个功能。下面将详细探讨这种导航菜单的设计原理、实现方法以及它在不同场景中的...
【标题】"CSS3实现的3D导航栏旋转切换特效源码"，揭示了这个压缩包文件的核心内容，即一个利用CSS3技术构建的、具有3D旋转切换效果的导航栏示例。在网页设计中，导航栏是用户界面的重要组成部分，它帮助用户在网站的...
总的来说，"javascript经典特效---旋转的导航链接.rar"这个压缩包提供了一个使用JavaScript和CSS3实现3D旋转导航链接的实例。开发者可以从中学习到如何结合JavaScript和CSS3来创造丰富的交互式网页元素，提升网页的...
两个导航菜单栏源码。包括3D旋转导航效果和普通旋转角度的导航效果。使用CSS3的新特性transform和transition来实现的动画效果。
jQuery css3制作3D旋转图标导航特效 jQuery css3制作3D旋转图标导航特效 jQuery css3制作3D旋转图标导航特效 jQuery css3制作3D旋转图标导航特效
【支持触摸屏的3D旋转木马jQuery特效】是一种在网页上实现的动态展示效果，主要应用于产品展示、图片轮播或互动体验等场景。它利用了jQuery库的强大功能，结合CSS3的3D变换技术，实现了在触摸屏设备上也能流畅运行的...
在移动设备上实现3D旋转图片滑动轮播是一种创新且引人注目的用户体验设计，它将传统的图片轮播效果提升到了一个新的维度。这种技术在网站、应用或互动媒体设计中广泛使用，以吸引用户的注意力并增加交互性。以下是...
标题“3D旋转的地球”所指的是一种交互式的3D视觉效果，通常在网站上用作吸引用户注意力的广告或导航元素。这种效果通过模拟地球的3D模型，允许用户通过鼠标操作来改变视角，观察地球表面的文字或图标的分布。在描述...
【3D旋转相册】是一种视觉效果显著的前端展示方式，尤其在个人纪念、摄影集或网站设计中广泛应用。这个项目的核心在于利用HTML5、CSS3以及JavaScript技术，实现图片在3D空间中的动态旋转展示，给用户带来独特的浏览...
"可以无限循环，自动旋转，停靠的3D旋转布局控件"是一个这样的创新性设计，它将为应用程序添加动态和交互性的元素。这个控件允许元素以3D效果旋转，并在用户界面上形成一种无限循环的效果，从而吸引用户的注意力并...
【百叶窗图片3D旋转切换特效】是一种利用JavaScript实现的动态视觉效果，它通过模拟百叶窗开启和关闭的过程，使图片以3D旋转的方式进行切换，为网站的焦点图或banner区域带来引人注目的展示效果。这种特效不仅增加了...
通过Three.js，开发者可以更容易地实现3D旋转特效，而不必从底层的WebGL API开始。 总的来说，"3d旋转特效.zip"文件可能包含的代码示例会涉及HTML5的`<canvas>`，CSS3的3D转换，WebGL API的使用，以及JavaScript中...