前言
这个是过渡transition应用的一个例子,前面讲的是动画的例子!
代码与讲解
- html部分,这里都是按照正常的ul来创建导航条
<ul>
<li>
<div class="box">
<div class="front">1</div>
<div class="bottom">2</div>
</div>
</li>
<li>
<div class="box">
<div class="front">1</div>
<div class="bottom">2</div>
</div>
</li>
<li>
<div class="box">
<div class="front">1</div>
<div class="bottom">2</div>
</div>
</li>
<li>
<div class="box">
<div class="front">1</div>
<div class="bottom">2</div>
</div>
</li>
<li>
<div class="box">
<div class="front">1</div>
<div class="bottom">2</div>
</div>
</li>
</ul>
ul{
display: flex;
//这里是为了让li水平排列,即flex布局
margin: 100px;
justify-content: space-between;
}
ul li{
width: 120px;
height: 35px;
margin: 0 10px;
/* 因为需要让box旋转,也需要透视,直接给li加视距,里面的子盒子都有透视效果 */
perspective: 500px;
}
.box{
position: relative;
width: 100%;
height: 100%;
text-align: center;
line-height: 35px;
transform-style: preserve-3d;
transition: all .4s;
}
//这里是为了实现翻转的效果
.box:hover{
/*这里直接给父元素设置翻转90度就不用分别给两个盒子设置*/
transform: rotateX(90deg);
}
.front,
.bottom{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.front{
background-color: pink;
z-index: 1;
/*这里是为了让front盒子来盖住那条线*/
transform: translateZ(17.5px);
}
.bottom{
background-color: purple;
/* 我们如果有移动或者其他样式,必须先写移动 */
/*其次这里Y轴的平移量是设置盒子高度的一半,移动后的X轴翻转成一条线段*/
transform:translateY(17.5px) rotateX(-90deg) ;
}
效果图: