CSS33D导航栏旋转切换代码.zip资源-CSDN文库

共1个文件

html：1个

版权申诉

jQuery特效

CSS特效

网页特效

170 浏览量 2023-10-09 23:48:05 上传评论收藏 1KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS3 3D导航栏旋转切换代码.zip （1个子文件）

jiaoben7995

index.html 2KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3 3D导航栏旋转切换代码 - 更多源码WW.96flw.COM</title> <style> * { margin: 0; padding: 0; } .w { width: 1200px; margin: 140px auto; } .nav_menu { display: flex; justify-content: space-around; align-items: center; height: 50px; /* background-color: #4caf50; */ /* border: 1px solid #ccc; */ padding: 10px; color: #fff; } .menu_item { position: relative; flex: 1; height: 100%; line-height: 50px; text-align: center; transform-style: preserve-3d; transition: all 0.5s; /* margin: 0 5px; */ } .menu_item:hover { cursor: pointer; transform: rotateX(90deg); } .home, .web_home { position: absolute; top: 0; left: 0; width: 100%; height: 100%; perspective: 300px; } .home { background-color: #4caf50; z-index: 11; transform: translateZ(25px); } .web_home { background-color: #009688; transform: translateY(25px) rotateX(-90deg); } </style> </head> <body> <div class="nav_menu w"> <div class="menu_item"> <div class="home">首页</div> <div class="web_home">网站首页</div> </div> <div class="menu_item"> <div class="home">首页1</div> <div class="web_home">网站首页1</div> </div> <div class="menu_item"> <div class="home">首页2</div> <div class="web_home">网站首页2</div> </div> <div class="menu_item"> <div class="home">首页3</div> <div class="web_home">网站首页3</div> </div> <div class="menu_item"> <div class="home">首页4</div> <div class="web_home">网站首页4</div> </div> <div class="menu_item"> <div class="home">首页5</div> <div class="web_home">网站首页5</div> </div> </div> </body> </html>

评论收藏

内容反馈

版权申诉