CSS动画之3D选择按钮
程序员文章站
2022-03-25 16:42:56
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
body{
background: blueviolet;
}
#box{
width: 500px;
margin: 100px auto;
display: flex;
}
.h1{
height: 50px;
width: 100px;
transition: 1s;
transform-style: preserve-3d;
}
.h3{
height: 50px;
width: 100px;
text-align: center;
line-height: 50px;
background: #ffffff;
position: relative;
transform:translateZ(25px);
}
.h2::before{
content: '你好';
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
position: absolute;
background: pink;
transform: translateY(25px) rotateX(90deg) rotateX(180deg)
}
.h1:hover{
transform: rotateX(90deg);
}
</style>
<body>
<div id="box">
<div class="h1">
<div class="h2">
<div class="h3">首页</div>
</div>
</div>
<div class="h1">
<div class="h2">
<div class="h3">我的</div>
</div>
</div>
<div class="h1">
<div class="h2">
<div class="h3">商城</div>
</div>
</div>
<div class="h1">
<div class="h2">
<div class="h3">分类</div>
</div>
</div>
<div class="h1">
<div class="h2">
<div class="h3">支付</div>
</div>
</div>
</div>
</body>
</html>
下一篇： 视图、索引、序列