代码如下:
<style>
* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
.first {
width: 300px;
height: 50px;
line-height: 50px;
margin: 50px auto;
display: flex;
/* background-color: beige; */
}
.first li {
width: 100px;
height: 50px;
position: relative;
transform-style: preserve-3d;
transition: all 0.5s;
}
.first a {
width: 100%;
height: 50px;
display: block;
box-sizing: border-box;
color: #fff;
text-align: center;
position: absolute;
left: 0;
top: 0;
}
.first li a:nth-child(1) {
background-color: black;
transform: translateZ(25px);
}
.first li a:nth-child(2) {
background-color: red;
transform: rotateX(90deg) translateZ(25px);
}
.first li:hover {
transform: rotateX(-90deg);
}
/* 多行文本垂直居中 */
.c {
width: 200px;
height: 200px;
background-color: aqua;
margin: 50px auto;
position: relative;
display: table;
}
.c .son {
/* 方法一 */
/* width: 200px; */
/* height: 100px; */
/* background-color: pink;
text-align: center;
color: #fff;
display: inline-block; */
/* display: inline; */
/* line-height: 20px;
vertical-align: middle; */
/* height: 100px; */
/* 方法二*/
/* display: table-cell;
vertical-align: middle;
background-color: pink; */
/* 方法三 */
/* position: absolute;
top: 50%;
transform: translateY(-50%); */
/* margin-top: -; */
/* 方法四 */
display: table-cell;
/* vertical-align: middle; */
/* text-align: center; */
}
</style>
</head>
<body>
<div class="first">
<li><a href="#">年少</a><a href="#">有为</a></li>
<li><a href="#">肆意</a><a href="#">青春</a></li>
<li><a href="#">一叶</a><a href="#">障目</a></li>
</div>
<!-- <div class="c">
<div class="son">无尽对决撒撒娇端快捷杜绝浪费解耦几等份</div>
</div> -->
</body>