演示地址

点击打开链接

注意:菜单翻转效果在搜狗浏览器上看不出来。推荐用FireFox

<!DOCTYPE   html   PUBLIC   "-//W3C//DTD XHTML 1.0 Strict//EN"
    
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>

<html
 
xmlns
=
"http://www.w3.org/1999/xhtml"
>


<head>

<style
 
type
=
"text/css"
>


/
*
<
![CDATA[*
/

  
ul
.flipboard
  {
  margin:

;
  padding:

;
  list-style:none;
  perspective:10000px;
  }
  
ul
.flipboard 
li

  {
  display:inline-block;
  
width
:80px;
  
height
:80px;
  margin-right:10px;
  
background
:white;
  
font
:bold 36px Arial;
  text-transform:uppercase;
  text-align:
center
;
  cursor:pointer;
  }
  
ul
.flipboard 
li
 
a

  {
  display:block;
  
width
:

%;
  
height
:

%;
  
color
:black;
  text-decoration:none;
  outline:none;
  transitional:all 300ms ease-out

.1s;
  }
  
ul
.flipboard 
li
 
a
 
span

  {
  box-sizeing:border-box;
  padding-top:15px;
  display:block;
  
width
:

%;
  
height
:

%;
  transition:all 300ms ease-out

.1s;
  }
  
ul
.flipboard 
li
:hover 
a

  {
  transform:rotate(180deg);
  
background
:#cef1ff;
  border-radius:7px;
  box_shadow:

5px #eee inset;
  }
  
ul
.flipboard 
li
:hover 
a
 
span

  {
  transform:rotateY(180deg);
  }
  
/
*]]
>
*
/

  
</style>

<title></title>


</head>

<body>

  
<ul
 
class
=
"flipboard"
>

    
<li><a
 
href
=
"#"
><span>
k
</span></a></li>

<li><a
 
href
=
"#"
><span>
o
</span></a></li>

<li><a
 
href
=
"#"
><span>
k
</span></a></li>

<li><a
 
href
=
"#"
><span>
i
</span></a></li>

<li><a
 
href
=
"#"
><span>
n
</span></a></li>

<li><a
 
href
=
"#"
><span>
g
</span></a></li>

  
</ul>


</body>


</html>

CSS3实现翻转菜单效果的更多相关文章

  1. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  2. 纯css3响应式3d翻转菜单

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...

  3. CSS3实现3d菜单翻转

    transform-style:flat | preserve-3d: 3d透视属性.针对子元素如何在3d空间相对其父元素渲染,这个属性声明在父元素上,并且他的子元素使用了transform才会有效. ...

  4. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  5. 纯CSS3实现的动感菜单效果

    1. [代码] 纯CSS3实现的动感菜单效果 <!DOCTYPE html><head><meta http-equiv="Content-Type" ...

  6. CSS3图片翻转切换案例及其中重要属性解析

    图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. ...

  7. 使用 jQuery & CSS3 实现翻转的作品集滑块

    作为 Web 开发人员,我想你一定见过各种各样的图片滑块效果.展示产品或者个人作品的方法有很多,其中之一是使用网格样式的滑块效果.在本教程中,我将分享如何使用 jQuery 和 CSS3 变换实现翻转 ...

  8. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  9. 11个优秀的HTML5 & CSS3下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...

随机推荐

  1. sublime3 常用功能总结

    介绍几个常见的功能: l 自动完成:自动完成的快捷键是Tab和Enter,如果在html文件中,输入cl按下tab或Enter,即可自动补全为class=””:加上zencoding后,更是如虎添翼, ...

  2. 一个P2P点播直播开源项目：P2PCenter

    最近跟着公司的项目走,我也研究了不少东西,尤其是在P2P方面,广泛涉猎各种开源项目,尤其是国外的开源项目,意外的发现了一个国内的项目,做的还不错,推荐一下.---------------------使 ...

  3. jquery仿邮箱文本输入框自动加载邮箱后缀

    在像百度这样的网站注册时,你会看到输入邮箱会出现自动给用户输入补全主流邮箱.这种对于增加用户体验的小例子已司空见惯.正好看到人家写的这种js功能.还挺不错,使用起来很方便,几乎不用写神呢代码.&quo ...

  4. BUFFER CACHE之调整buffer cache的大小

    Buffer Cache存放真正数据的缓冲区,shared Pool里面存放的是sql指令(LC中一次编译,多次运行,加快处理性能,cache hit ratio要高),而buffer cache里面 ...

  5. SpringMVC——hello SpringMVC

    概述: Spring的web框架围绕DispatcherServlet设计. DispatcherServlet的作用是将请求分发到不同的处理器. 与其它web MVC框架一样,Spring的web ...

  6. SharePoint 2010 列表项事件接收器 ItemAdded 的使用方法

    列表项事件处理器是继承于Microsoft.SharePoint.SPItemEventReceiver的类,Microsoft.SharePoint.SPItemEventReceiver类提供了许 ...

  7. Java异常的分类

    1. 异常机制       异常机制是指当程序出现错误后,程序如何处理.具体来说,异常机制提供了程序退出的安全通道.当出现错误后,程序执行的流程发生改变,程序的控制权转移到异常处理器.       传 ...

  8. android改变字体的颜色的三种方法

    写文字在Android模拟器中的方法 法一: main.xml配置文件: <TextView android:id="@+id/tv" android:layout_widt ...

  9. Dev gridControl 按回车增加一行

    将NewItemRowPosition属性设置为Top或Bottom, 在这样的新行中输入数据后,会自动添加到绑定的数据源中的, 如果你希望在按回车时焦点跳至下一列, 只需要设置GridView的Op ...

  10. Android之布局属性

    1) 布局的相关属性 ① android:layout_weight="1.0",layout_weight 用于给一个线性布局中的诸多视图重要度赋值.所有的视图都有一个layou ...