携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 33 天，点击查看活动详情
在上一节中，我们通过使用 CSS3 的 animation 属性实现了一个 3D立体文字方格跳动 和 弹跳小球运动 的效果，关于 animation 属性其实还有很多有意思的使用案例，今天我们继续来实现几个有意思的效果，让我们开始吧！
3D翻转菜单导航
导航效果在日常的开发中是很常见的，今天我们就来实现一个 3D翻转菜单导航 的效果吧，首先还是先看一下具体的效果，如下图：
效果看着很简单。老规矩，还是先看一下基础的 html 代码吧，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 - 3D翻转菜单导航</title>
</head>
<body>
<ul>
<li><a href="#"><span title="home">home</span></a></li>
<li><a href="#"><span title="about">about</span></a></li>
<li><a href="#"><span title="article">article</span></a></li>
<li><a href="#"><span title="contact">contact</span></a></li>
<li><a href="#"><span title="service">service</span></a></li>
</ul>
</body>
</html>
基础的 html 很简单，通过 ul 和 li 标签实现基本的导航骨架，主要是内容还是在 css 中，下面我们一起来看一下 css 相关的代码，如下：
*{ margin: 0;padding: 0;list-style: none;}
html, body {width: 100%; height: 100%;}
body {
background-color: #c2b5fa;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
ul {
background-color: #fff;
display: flex;
width: 600px;
position: relative;
top: -10%;
box-shadow: 0 0 200px rgba(145,121,250,1);
li {
transform-style: preserve-3d;
a {
color: #262626;
font-size: 16px;
text-transform: capitalize;
text-decoration: none;
font-weight: bold;
display: block;
position: relative;
span {
width: 120px;
height: 50px;
display: block;
text-align: center;
line-height: 50px;
color: transparent;
position: relative;
&::after {
content: attr(title);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #9179fa;
color: #fff;
transform-style: preserve-3d;
transition: .3s;
transform: rotateX(90deg) translateY(60px);
transform-origin: bottom;
}
&::before {
content: attr(title);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
color: #000;
transform-style: preserve-3d;
transition: .3s;
transform: rotateX(0) translateY(0);
transform-origin: top;
}
&:hover {
&::after {
transform: rotateX(0) translateY(0);
}
&::before {
transform: rotateX(90deg) translateY(-20px);
}
}
}
}
}
}
在这个效果中，主要通过 CSS3 的 transform-style 属性将视口设置为 3D 的，通过 preserve-3d 来设置，然后我们还需要设置旋转的角度，通过视觉差完成翻转，最终是实现代码可以在这里进行查看
3D圆形层叠运动
在上面我们使用 CSS3 中的 transform-style 完成了一个 3D翻转菜单导航 的效果，接下来我们再来实现一个更加炫酷的 3D 效果 -- 3D圆形层叠，我们还是先来看一下最终的效果图吧，如下：
老规矩还是先实现 html 的内容，具体的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 - 3D圆形层叠运动效果</title>
</head>
<body>
<section class="container">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</section>
</body>
</html>
一般类似这样的效果，都需要使用 CSS 中的 transform-style 将视口转换为 3D 模式，下面我们来看一下具体的 CSS 代码，如下：
*{ margin: 0;padding: 0;list-style: none;}
html, body {width: 100%; height: 100%;}
body {
display: grid;
justify-content: center;
align-items: center;
background-color: #9c27b0;
overflow: hidden;
}
.container {
position: relative;
top: -50px;
width: 300px;
height: 300px;
transform-style: preserve-3d;
transform: perspective(500px) rotateX(60deg);
span {
position: absolute;
display: block;
border: 5px solid #fff;
box-shadow: 0 5px 0 #ccc, inset 0 5px 0 #ccc;
box-sizing: border-box;
border-radius: 50%;
animation: animateSpan 3s ease-in-out infinite;
&:nth-child(1) {
top: 0;
left: 0;
bottom: 0;
right: 0;
animation-delay: 1.5s;
}
&:nth-child(2) {
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
animation-delay: 1.4s;
}
&:nth-child(3) {
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
animation-delay: 1.3s;
}
&:nth-child(4) {
top: 30px;
left: 30px;
bottom: 30px;
right: 30px;
animation-delay: 1.2s;
}
&:nth-child(5) {
top: 40px;
left: 40px;
bottom: 40px;
right: 40px;
animation-delay: 1.1s;
}
&:nth-child(6) {
top: 50px;
left: 50px;
bottom: 50px;
right: 50px;
animation-delay: 1s;
}
&:nth-child(7) {
top: 60px;
left: 60px;
bottom: 60px;
right: 60px;
animation-delay: 0.9s;
}
&:nth-child(8) {
top: 70px;
left: 70px;
bottom: 70px;
right: 70px;
animation-delay: 0.8s;
}
&:nth-child(9) {
top: 80px;
left: 80px;
bottom: 80px;
right: 80px;
animation-delay: 0.7s;
}
&:nth-child(10) {
top: 90px;
left: 90px;
bottom: 90px;
right: 90px;
animation-delay: 0.6s;
}
&:nth-child(11) {
top: 100px;
left: 100px;
bottom: 100px;
right: 100px;
animation-delay: 0.5s;
}
&:nth-child(12) {
top: 110px;
left: 110px;
bottom: 110px;
right: 110px;
animation-delay: 0.4s;
}
&:nth-child(13) {
top: 120px;
left: 120px;
bottom: 120px;
right: 120px;
animation-delay: 0.3s;
}
&:nth-child(14) {
top: 130px;
left: 130px;
bottom: 130px;
right: 130px;
animation-delay: 0.2s;
}
&:nth-child(15) {
top: 140px;
left: 140px;
bottom: 140px;
right: 140px;
animation-delay: 0.1s;
}
}
}
@keyframes animateSpan {
0%, 100% {
transform: translateZ(-100px);
}
50% {
transform: translateZ(100px);
}
}
在上述的代码中，主要通过给每个 span 单独设置它的定位，然后通过不同的延迟执行时间，从而实现这个 3D圆形层叠运动 的效果，具体的实现代码可以在这里进行查看
看了上述的代码，是不是很简单呢？快快动手实现一下吧！
最后
灵活运用 html + css 能够实现很多很有意思的效果，主要还是需要对 css3 中新增的一些属性有一定的了解，这样才能让我们不借助其它工具就实现相关的动画效果。
最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家
