HTML+CSS实现菜单的3D翻转特效
效果图如下：
HTML部分源代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>翻转特效</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="item">
<a href="#">
<p class="cn">首页</p>
<p class="en">INDEX</p>
</a>
</div>
<div class="item">
<a href="#">
<p class="cn">博客</p>
<p class="en">BLOG</p>
</a>
</div>
<div class="item">
<a href="#">
<p class="cn">关于</p>
<p class="en">ABOUT</p>
</a>
</div>
</nav>
</body>
</html>
CSS部分源代码如下：
:root {
--background-color: #2c3e50;
--color1: #7591AD;
--color2: #9729ad;
--color3: #db2159;
}
* {
margin: 0;
padding: 0;
}
html {
font-size: 14px;
}
body {
width: 100vw;
height: 100vh;
background-color: var(--background-color);
display: flex;
justify-content: center;
align-items: center;
}
nav {
width: 680px;
background-color: var(--color1);
}
.item {
width: 200px;
height: 100px;
margin: 10px;
float: left;
perspective: 4000px;
}
.item a {
display: block;
height: 100px;
text-decoration: none;
color: #fff;
font-size: 1.5em;
/* 开启3d */
transform-style: preserve-3d;
/* 通过变换角度可以发现刚才的夹角好像一个打开的笔记本电脑 */
/* transform: rotateX(10deg) rotateY(10deg) translateZ(50px); */
/* 增加z轴上的位移主要是为了让hover旋转式沿着夹角形成的 */
/* 虚拟立方体中心轴旋转而不是当前cn元素的这一面的中心 */
transform: translateZ(50px);
transition: 0.5s;
}
.item a p {
height: 100px;
line-height: 100px;
text-align: center;
}
.item a p.cn {
background-color: var(--color2);
}
.item a p.en {
background-color: var(--color3);
/* en元素沿顶端x轴逆向旋转90度
形成于cn元素垂直的夹角，类似于形成一个缺两面的正方体
*/
transform: rotateX(-90deg);
transform-origin: top;
}
.item a:hover{
/* 当鼠标移动到a元素时旋转，沿X轴旋转顺时针90度 */
/* 因为当前旋转基点在夹角形成的虚拟正方体的中心，所有看起来就像旋转
立方体的两个面一样 */
/* 出现偏移问题是因为顺序原因，具体的后续查了下文档发现，变换动作的
顺序会影响最终呈现的效果 */
transform: rotateX(90deg) translateZ(50px) ;
}