<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
/* a标签样式 */
.box ul li a{
text-decoration: none;
display:inline-block;
width: 100px;
height: 100%;
line-height: 30px;
color: white;
}
/* 盒子居中 */
.box{
width: 300px;
height: 300px;
margin: 50px auto;
}
/* 解决ul高度塌陷 */
.box ul::after{
content:'';
display: block;
visibility: hidden;
clear: both;
}
/* 水平排列 */
.box ul li{
float: left;
transform-style: preserve-3d;
transition: all 0.7s;
text-align: center;
height: 30px;
/* transform: rotateX(-25deg) rotateY(25deg); */
}
.box ul li:hover{
transform: rotateX(-90deg);
}
.box ul li a:last-child{
transform: translateY(-45px) rotateX(90deg);
background:orange;
display: block;
}
.box ul li a:first-child{
background:green;
transform: translateZ(15px);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="">登录</a><a href="">login</a></li>
<li><a href="">首页</a><a href="">index</a></li>
<li><a href="">注册</a><a href="">register</a></li>
</ul>
</div>
</body>
</html>
css-3d导航(transform)
于 2022-08-24 10:12:24 首次发布