/*****************************百度钱包旋转变内容******************************/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度钱包旋转变内容</title>
<style>
.wallet{
width: 300px;
height:300px ;
margin: 50px auto;
position: relative;
transition: all 8s;
transform-style:preserve-3d; /* 加了之后父盒子就真正3D*/
}
.wallet::before, .wallet::after{
content: ‘‘;
display: block;
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
/*right:0;
bottom:0;*/
background: red;
}
.wallet::before{
background: #33ffca; /*可更换为图片*/
transform: translateZ(-5px);
/*子元素必须是转换元素，eg两个平面必须要有距离，才起作用transform-style:preserve-3d;*/
}
.wallet::after{
background: #3598db; /*可更换为图片*/
transform: translateZ(5px); /*可以更改两个平面Z距离*/
}
.wallet:hover{
transform: rotateY(180deg); /*顺时针180*/
}
</style>
</head>
<body>
<div class="wallet">
</div>
</body>
</html>
/*****************************3D导航******************************/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D导航</title>
<style>
body{
margin: 0;
padding:0;
font-family: "Agency FB";
background: #f7f7f7;
}
.nav{
height:40px;
margin-top: 50px;
text-align: center;
list-style: none;
}
li{
width:120px ;
height: 40px;
line-height: 40px;
float: left;
position: relative;
-webkit-transition: all 1s;
transform-style:preserve-3d; /*加了之后父盒子就真正3D*/
}
li span{
position: absolute;
top:0;
left: 0;
width:100%;
height:100%;
}
li span:first-child{
background: yellow;
transform:rotateX(90deg) translateZ(20px);
}
li span:last-child{
background: #3598db;
transform: translateZ(20px);
}
li:hover{
transform: rotateX(-90deg); /*旋转整个标签*/
}
</style>
</head>
<body>
<ul class="nav">
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
</ul>
</body>
</html>
/*****************************3D导航升级->3D轮播图******************************/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D导航升级->3D轮播图</title>
<style>
body{
margin: 0;
padding:0;
font-family:"微软雅黑";
background: #f7f7f7;
}
.nav{
height:40px;
margin-top: 50px;
text-align: center;
list-style: none;
}
li{
width:120px ;
height: 40px;
line-height: 40px;
float: left;
position: relative;
-webkit-transition: all 1s;
transform-style:preserve-3d; /*加了之后父盒子就真正3D*/
}
li span{
position: absolute;
top:0;
left: 0;
width:100%;
height:100%;
}
li span:first-child{
background: yellow;
transform:rotateX(90deg) translateZ(20px);
}
li span:last-child{
background: #3598db;
transform: translateZ(20px);
}
/*旋转整个li标签*/
/*li:hover{
transform: rotateX(-90deg);
}*/
/*旋转整个ul标签*/
/*类似3D轮播图*/
.nav:hover li{
transform: rotateX(-90deg);
}
.nav li:nth-child(1){
transition-delay: 0s; /*延迟0s*/
}
.nav li:nth-child(1){
transition-delay: 0.2s; /*延迟0s*/
}
.nav li:nth-child(2){
transition-delay: 0.4s; /*延迟0s*/
}
.nav li:nth-child(3){
transition-delay: 0.6s; /*延迟0s*/
}
.nav li:nth-child(4){
transition-delay: 0.8s; /*延迟0s*/
}
.nav li:nth-child(5){
transition-delay: 1s; /*延迟0s*/
}
</style>
</head>
<body>
<ul class="nav">
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
<li>
<span>3D样式导航</span>
<span>轻轻走143</span>
</li>
</ul>
</body>
</html>
| 【作者】：轻轻走143 |
| 【出处】：http://www.cnblogs.com/qingqingzou-143/ |
| 【声明】：所有博文标题后加（share）的表示收集的他人优秀文章，其余的则为原创。欢迎转载，但请在显要位置显示本文链接，并保留本段声明，否则追究法律责任，谢谢！ |
时间： 2024-12-23 14:42:25