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 ></i></a>
</div>
</div>
</div>
</body>
</html>
- 上一篇 »使用 CSS3 实现 3D 图片滑块效果
- 下一篇 »CSS3实现边框锯齿效果