闲着没事复习了下c3动画,写了个立体效果的导航,适合c3新手去尝试写
html部分
<body>
<div class="item">
<div>1</div>
<div>2</div>
<div>2</div>
</div>
<div class="item">
<div>1</div>
<div>2</div>
<div>2</div>
</div>
<div class="item">
<div>1</div>
<div>2</div>
<div>2</div>
</div>
</body>
css部分
<style>
body{
perspective: 1000px;
text-align: center;
}
.item{
width: 100px;
height: 100px;
float: left;
transform-style: preserve-3d;
transition: all 1s;
text-align: center;
}
.item div{
width: 100%;
height: 100%;
position: absolute;
left:50%
}
.item div:nth-child(1){
background-color:olive;
transform:translateZ(50px);
}
.item div:nth-child(2){
background-color:orangered;
transform: rotateX(-90deg) translateZ(50px);
}
.item div:nth-child(3){
background-color:black;
transform: rotateY(90deg) translateZ(50px);
}
.item:hover{
transform: rotateX(90deg);
}
</style>
鼠标悬浮的时候,就会这样向上转,比传统导航有点意思