纯CSS 实现鼠标悬停菜单栏翻滚的效果
作者:互联网
效果展示:
html:
<div class="test55"> <div class="test5"> <div class="box1">菜单</div> <div class="box2">菜单</div> </div> <div class="test5"> <div class="box1">视频</div> <div class="box2">视频</div> </div> <div class="test5"> <div class="box1">主页</div> <div class="box2">主页</div> </div> <div class="test5"> <div class="box1">资讯</div> <div class="box2">资讯</div> </div> <div class="test5"> <div class="box1">详情</div> <div class="box2">详情</div> </div> <div class="test5"> <div class="box1">更多</div> <div class="box2">更多</div> </div> </div>
css:
.box2{ position: absolute; transform: perspective(1000px) translateY(-15px) rotateX(90deg); } .box1{ position: absolute; transform: perspective(1000px) translateZ(15px); } .test5:hover { transform: translateY(0px) rotateX(-90deg) translateZ(-0px); transition: 0.3s; } .test5 div { text-align: center; width: 60px; height: 30px; line-height: 30px; color: white; background-color: #000; } .test5 { display: inline-block; width: 60px; transform-style: preserve-3d; transition: 0.3s; position: relative; height: 30px; } .test55{ margin-left: 50px; }
标签:test5,color,transform,菜单栏,鼠标悬停,position,height,30px,CSS 来源: https://www.cnblogs.com/Utopia-in-reality/p/14252315.html