css3实现3d显示效果
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width"/><!-- , maximum-scale=1.0, user-scalable=no, " /> -->
<style type="text/css">
div {
box-sizing: border-box
}
a {
color: #000;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear
}
.nav {
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px
}
.navIcon {
position: absolute;
left: 0;
top: 0;
z-index: 990;
height: 100%;
background: #252525
}
.navIcon li {
border-bottom: 1px solid rgba(0,0,0,.3)
}
.navIcon a {
display: block;
width: 64px;
height: 64px;
line-height: 64px;
text-align: center;
font-size: 1.6em;
color: #999;
text-shadow: 0 1px 0 #000;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out
}
.navIcon a:hover {
color: #fff;
-webkit-transform: translateX(10px) scale(1.2);
-moz-transform: translateX(10px) scale(1.2);
-ms-transform: translateX(10px) scale(1.2);
-o-transform: translateX(10px) scale(1.2);
transform: translateX(10px) scale(1.2)
}
.nav:hover .navText {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg)
}
.navText {
position: absolute;
left: 63px;
top: 0;
z-index: 980;
height: 100%;
background: #252525;
border-right: 1px solid rgba(0,0,0,.3);
-webkit-transition: -webkit-transform .24s linear;
-moz-transition: -moz-transform .24s linear;
-ms-transition: -ms-transform .24s linear;
-o-transition: -o-transform .24s linear;
transition: transform .24s linear;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg)
}
.navText li {
border-bottom: 1px solid rgba(0,0,0,.3)
}
.navText a {
display: block;
width: 200px;
height: 64px;
line-height: 64px;
text-indent: 1em;
font-size: 1.4em;
color: #999;
text-shadow: 0 1px 0 #000;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out
}
.navText a:hover {
color: #fff;
-webkit-transform: translateX(-14px);
-moz-transform: translateX(-14px);
-ms-transform: translateX(-14px);
-o-transform: translateX(-14px);
transform: translateX(-14px)
}
.nav:hover .navInfo {
left: 0;
opacity: 1;
-webkit-transition: opacity .5s ease-in .1s;
-moz-transition: opacity .5s ease-in .1s;
-ms-transition: opacity .5s ease-in .1s;
-o-transition: opacity .5s ease-in .1s;
transition: opacity .5s ease-in .1s
}
.navInfo {
position: absolute;
left: -400px;
bottom: 30px;
z-index: 999;
width: 264px;
color: #fff;
text-align: center;
line-height: 1.6;
opacity: 0
}
.navBlogLogo p {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 50%;
border: 8px solid #fff;
background: #252525;
opacity: .6;
overflow: hidden;
text-align: center;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
-webkit-box-shadow: inset 0 0 0 5px #fff;
-moz-box-shadow: inset 0 0 0 5px #fff;
box-shadow: inset 0 0 0 5px #fff
}
.navBlogLogo img {
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear
}
.navBlogLogo p:hover {
opacity: 1;
-webkit-box-shadow: 0 0 10px 1px #fff,inset 0 0 16px 4px #fff;
-moz-box-shadow: 0 0 10px 1px #fff,inset 0 0 16px 4px #fff;
box-shadow: 0 0 10px 1px #fff,inset 0 0 16px 4px #fff
}
.navBlogLogo p:hover img {
-webkit-transform: scale(0.88);
-moz-transform: scale(0.88);
-ms-transform: scale(0.88);
-o-transform: scale(0.88);
transform: scale(0.88)
}
.navBlogName {
font-size: 2em;
font-weight: bold;
letter-spacing: 2px;
color: #434343;
text-shadow: -1px -1px #4f4f4f,1px 1px #111
}
.navBlogDescription {
color: #444;
text-shadow: 1px 1px #111
}
.navFollow a {
font-size: 2em;
color: #323232;
letter-spacing: .5em;
text-shadow: 1px 1px #444,-1px -1px #111
}
.navFollow a:hover {
color: #545454;
text-shadow: -1px -1px #565656,1px 1px #111
}
</style>
</head>
<body>
<div id="nav" class="nav">
<div class="navIcon">
<ul>
<li><a title="Coding Serf" href="http://www.codingserf.com/"><i class="fa fa-home ">菜单1</i></a></li>
<li><a href="http://www.codingserf.com/index.php/category/1/"><i class="fa fa-bug ">菜单2</i></a></li>
<li><a href="http://www.codingserf.com/index.php/category/2/"><i class="fa fa-edit ">菜单3</i></a></li>
<li><a href="http://www.codingserf.com/index.php/category/3/"><i class="fa fa-gift ">菜单4</i></a></li>
<!-- <li><a href="#"><i class="fa fa-user-md "></i></a></li> -->
</ul>
</div>
<div class="navText">
<ul>
<li><a title="Coding Serf" href="http://www.codingserf.com/">Coding Serf</a></li>
<li class="cat-item cat-item-1"><a href="http://www.codingserf.com/index.php/category/1/" title="查看Web下的所有文章">Web</a>
</li>
<li class="cat-item cat-item-8"><a href="http://www.codingserf.com/index.php/category/2/" title="查看Translations下的所有文章">Translations</a>
</li>
<li class="cat-item cat-item-15"><a href="http://www.codingserf.com/index.php/category/3/" title="查看Life下的所有文章">Life</a>
</li>
</ul>
</div>
<div class="navInfo">
<div class="navBlogLogo"><p><img src="http://www.codingserf.com/wp-content/themes/codingserf/images/logo.jpeg" alt="logo"></p></div>
<div class="navBlogName">Coding Serf</div>
<div class="navBlogDescription">Stay @ Front End | "呆"在前端</div>
<div class="navFollow">
<a target="_blank" href="http://weibo.com/lybluesky"><i class="fa fa-weibo"></i></a>
<a target="_blank" href="https://twitter.com/lybluesky"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
</body>
</html>
css3实现3d显示效果的更多相关文章
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css3的3D和2D
css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- CSS3之3D变换实例详解
CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...
- CSS3 transforms 3D翻开
R T L B <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 使用CSS3实现3D图片滑块效果
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- 一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id= ...
- 基于css3的3D立方体旋转特效
今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...
- HTML5和CSS3实现3D转换效果 CSS3的3D效果
上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...
随机推荐
- MySQL存储过程中的3种循环【转载】
在MySQL存储过程的语句中有三个标准的循环方式:WHILE循环,LOOP循环以及REPEAT循环.还有一种非标准的循环方式:GOTO,不过这种循环方式最好别用,很容易引起程序的混乱,在这里就不错具体 ...
- putty简单使用
一.Putty简介 Putty是一款轻便的远程登录工具,用它可以非常方便的登录到Linux服务器上进行各种操作(命令行方式).Putty完全免费,而且无需安装(双击即可运行),支持多种连接类型(Tel ...
- OpenWrt 中安装配置Transmission
参考文章https://wiki.openwrt.org/doc/uci/transmission 1. 安装包 必装的 transmission-daemon-openssl (后台服务)选装的 t ...
- Android C/C++ 开发
标准的做法是 把 src 放到 /Android/develop/ 目录下去,然后建立 Android.mk 文件, 然后 make modue ...., 但是,这种方式 太麻烦. 下面介绍一种方 ...
- WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库
WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库. WeUI 是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含butt ...
- Android API之android.provider.ContactsContract.RawContacts
android.provider.ContactsContract.RawContacts Constants for the raw contacts table, which contains o ...
- js createElement appendChild createTextNode用法
xml不支持innerHTML 1 <p id="bj">北京</p> <script type="text/javascript" ...
- 解释一下文件/etc/fstab的内容
/etc/fstab 内容解释(偷个懒,把别人的话拷贝过来,做个标记,然后下班走人...)/dev/hda1 /mnt/c ntfs ro,users,gid=users,umask=0002,nls ...
- JavaScript：用JS实现加载页面前弹出模态框
用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...
- ubuntu(14.04) 安装ssh，并使用root用户登录
1.apt-get install openssh-server 2.修改ssh的配置文件/etc/ssh/sshd_config 注释掉以前的:PermitRootLogin without-pas ...