演示地址

点击打开链接

注意:菜单翻转效果在搜狗浏览器上看不出来。推荐用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. symbolicatecrash位置

    symbolicatecrash是一个隐藏工具,它在我的Mac中的具体路径如下(Xcode6.1.app请换成你的Xcode名称) /Applications/Xcode6.1.app/Content ...

  2. memcached 最大连接数及其内存大小的设置

    memcached的基本设置: -p 监听的端口-l 连接的IP地址, 默认是本机-d start 启动memcached服务-d restart 重起memcached服务-d stop|shutd ...

  3. JOB的创建，定时，执行

    --建表 create table test_job(para_date date);  commit;  insert into test_job values(sysdate);  commit; ...

  4. Android 开发框架介绍

    一.概述 现android开发有很多开发框架使用,做App不一定用到框架,但好框架的思想也是值得学习.选择合适的开发框架可提供实用功能,简化项目开发提升效率. 二.Afinal框架 简介 Afinal ...

  5. css的框架——global.css

    global.css,一般这个css文件是用于装全站主要框架css样式代码. “global”翻译为全局.全部.从翻译中大家也能理解global.css用于做什么.大站常常用于装全站公共的CSS样式选 ...

  6. 【转】错误日志ID8021来源BROWSER导致电脑死机

    现场工控机死机,网上查了篇文章,具体原因还有待分析,下面是图 在这里有必要介绍两个ID号:6006和6005.在事件查看器里ID号为6006的事件表示事件日志服务已停止,如果你没有在当天的事件查看器中 ...

  7. 有效处理java异常的三个原则

    Java中异常提供了一种识别及响应错误情况的一致性机制,有效地异常处理能使程序更加健壮.易于调试.异常之所以是一种强大的调试手段,在于其回答了以下三个问题: 什么出了错? 在哪出的错? 为什么出错? ...

  8. bjfu1164 Parity Game

    简单规律题.首先想到的是,若01串中1有n个,则可以通过操作,使串中1的个数变为n-1.n-2……1.0个:第2个想到的是,如果n为奇数,可以通过操作,使串中1的个数最多变为n+1,而若n为偶数,则无 ...

  9. Ubuntu14.04下Python3.4启动IDLE

    1.在Ubuntu14.04 LTS版本中,已经自行安装了python,可以在Terminal(CTRL+ALT+T)中输入:ls /usr/bin | grep python 进行查看. 如果想运行 ...

  10. 学习笔记 - 深究Bitmap压缩避免OOM的核心inSampleSize的最佳取值

    /** * 测试代码,通过在SDCard根目录放置几种不同大小的图片, 来自动测试压缩方式是否有效同时看是否会内存不够. * * @since * By:AsionTang * At:2014年3月2 ...