演示地址

点击打开链接

注意:菜单翻转效果在搜狗浏览器上看不出来。推荐用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. python - os.path，路径相关操作

    python处理系统路径的相关操作: # -*- coding: utf-8 -*- import os # 属性 print '__file__: %s' % __file__ # 绝对路径(包含文 ...

  2. erl0003-ets 几种类型的区别和ets效率建议 <转>

    rlang内置大数据量数据库 ets,dets 初窥 发布日期:2011-10-24 18:45:48   作者:dp studio ets是Erlang term storage的缩写, dets则 ...

  3. AngularJS：实现动态添加输入控件功能（转）

    http://www.cnblogs.com/ilovewindy/p/3849428.html <!DOCTYPE html> <html> <head> < ...

  4. js如何判断是否在iframe中及防止网页被别站用 iframe嵌套 (Load denied by X-Frame-Options)

    1. js如何判断是否在iframe中 //方式一 if (self.frameElement && self.frameElement.tagName == "IFRAME ...

  5. HTML5实现扫描识别二维码/生成二维码

    扫描识别二维码 思路: 1. 操作摄像头,获取图片.HTML5 WEBRTC的navigator.getUserMedia方法去实时获取摄像头资源.  2. 利用canvas使用相关算法分析图片识别图 ...

  6. MyBatis学习 之 四、MyBatis配置文件

    目录(?)[-] 四MyBatis主配置文件 properties属性 settings设置 typeAliases类型别名 typeHandlers类型句柄 ObjectFactory对象工厂 pl ...

  7. 【c++内存分布系列】虚基类表

    虚基类表相对于虚函数表要稍微难理解些,故单独提出来. 虚函数表是在对象生成时插入一个虚函数指针,指向虚函数表,这个表中所列就是虚函数. 虚基类表原理与虚函数表类似,不过虚基类表的内容有所不同.表的第一 ...

  8. Xamarin Mono Android Ios 安装、破解(4.12)

    一.Windows下面的安装 1. 安装环境介绍: Win8.1 企业版64位.VS2013,mono-android-4.12.02001,下面的安装过程都是在VS2013已经安装成功之后的操作,本 ...

  9. acdream 1044

    题意:有你一个草坪,草的初始高度都是100,让你用割草机割,割草机只能横着或竖着割,每次割的高度一定,问你能不能割出给定的草坪出来. 考虑任意一个草被割要么是横着要么竖着,所以任意一个草必然是它所在行 ...

  10. hdu5073 简单枚举+精度处理

    其实这题还是挺简单的,因为移动k个星球后,这k个星球的权值就可以变为0,所以只有剩下的本来就是连着的才是最优解,也就是说要动也是动两端的,那么就O(N)枚举一遍动哪些就好了. 我是在杭电oj题目重现的 ...