CSS3 3D导航和正方体旋转
2019-05-24 本文已影响4人
CondorHero
一、3D导航条
3D导航条.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D导航条</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
width: 1000px;
height: 40px;
margin: 200px auto;
}
ul {
list-style: none;
}
ul li {
float: left;
height: 40px;
width: 125px;
line-height: 40px;
position: relative;
transition: all 0.4s ease 0s;
transform-style: preserve-3d;
}
ul li span {
position: absolute;
width: 125px;
display: block;
text-align: center;
}
ul li .show {
background-color: #0f0;
transform: translateZ(20px);
}
ul li .hidden {
background-color: #f0f;
transform: rotateX(-90deg) translateZ(20px);
}
ul li:hover {
transform: rotateX(90deg);
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="sh">
<a href=""><span class="show">首页</span></a>
<a href=""><span class="hidden">翻页</span></a>
</li>
<li class="sh">
<a href=""><span class="show">正页</span></a>
<a href=""><span class="hidden">反页</span></a>
</li>
<li class="sh">
<a href=""><span class="show">首页</span></a>
<a href=""><span class="hidden">导航</span></a>
</li>
<li class="sh">
<a href=""><span class="show">正页</span></a>
<a href=""><span class="hidden">导航</span></a>
</li>
<li class="sh">
<a href=""><span class="show">首页</span></a>
<a href=""><span class="hidden">导航</span></a>
</li>
<li class="sh">
<a href=""><span class="show">首页</span></a>
<a href=""><span class="hidden">导航</span></a>
</li>
<li class="sh">
<a href=""><span class="show">首页</span></a>
<a href=""><span class="hidden">导航</span></a>
</li>
<li class="sh">
<a href=""><span class="show">首页</span></a>
<a href=""><span class="hidden">导航</span></a>
</li>
</ul>
</div>
</body>
</html>
二、3D旋转正方体
3D旋转正方体
附上源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D正方体</title>
<style>
*{margin:0;padding:0;}
ul {
list-style: none;
width: 200px;
height: 200px;
position: relative;
margin: 200px auto;
/*定义运动时间时长*/
transition: all 6s ease 0s;
/*保留立体动画*/
transform-style: preserve-3d;
}
ul li {
width: 200px;
line-height: 200px;
text-align: center;
font-size: 140px;
color: #fff ;
/*绝对定位让盒子在一起*/
position: absolute;
}
/*放入背景，在使用translateZ让动画立体起来以平面建立立体坐标原点*/
ul li:nth-child(1){background-color: rgba(255,0,0,0.6); transform: rotateX(0deg) translateZ(100px);}
ul li:nth-child(2){background-color: rgba(0,255,0,0.6); transform: rotateX(90deg) translateZ(100px);}
ul li:nth-child(3){background-color: rgba(0,0,255,0.6); transform: rotateX(180deg) translateZ(100px);}
ul li:nth-child(4){background-color: rgba(0,255,255,0.6); transform: rotateX(-90deg) translateZ(100px);}
ul li:nth-child(5){background-color: rgba(255,255,0,0.6); transform: rotateY(90deg) translateZ(100px);}
ul li:nth-child(6){background-color: rgba(255,0,255,0.6); transform: rotateY(-90deg) translateZ(100px);}
/*让盒子运动起来*/
ul:hover {
transform: rotateX(360deg) rotateY(360deg);
}
</style>
</head>
<body>
<!-- 定义一个列表来放六个面的盒子 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
CSS3的 @keyframes 用法详解:
此属性与 animation 是密切相关的，两者是绑定在一起的。
三、animation的作用
keyframes 翻译成中文，是"关键帧"的意思。顾名思义可以对每一帧进行控制。
使用transition属性也能够实现过渡动画效果，但是略显粗糙，因为不能够更为精细的控制动画过程，比如只能够在指定的时间段内总体控制某一属性的过渡，而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些。
语法结构:
@keyframes animationname {keyframes-selector {css-styles;}}
参数解析:
- animationname:声明动画的名称。必须与
animation定义的名字一致。 - keyframes-selector:用来划分动画的时长，可以使用百分比形式，也可以使用 "from" 和 "to"的形式。
"from" 和 "to"的形式等价于 0% 和 100%。
建议始终使用百分比形式。
<style>
div {
height: 180px;
width: 180px;
background-color: pink;
border-radius: 40px;
position: relative;
animation:move 3s ease infinite alternate;
}
@keyframes move{
0%{left:0;}
25%{left:200px;}
50%{left:400px;}
75%{left:600px;}
100%{left:800px;}
}
</style>
上面代码实现了简单的动画，下面简单做一下分析:
- 使用move让animation和@keyframes产生联系。
- 规定3s内完成。
- 运动方式ease
- 默认执行一次，
