CSS: rolling-overler navigation
CSS navigation
2023-09-11 14:16:16 时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style-type: none; } ul { display: flex; justify-content: space-evenly; margin: 100px auto; } li { perspective: 500px; width: 100px; height: 36px; margin: 0 10px; } .box { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: all 1s; } .box:hover { transform: rotateX(90deg); } .front, .back { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .front { background-color: palegoldenrod; transform: translateZ(18px); z-index: 1; } .back { background-color: teal; transform: translateY(18px) rotateX(-90deg); } </style> </head> <body> <ul> <li> <div class="box"> <div class="front">front</div> <div class="back">back</div> </div> </li> <li> <div class="box"> <div class="front">front</div> <div class="back">back</div> </div> </li> <li> <div class="box"> <div class="front">front</div> <div class="back">back</div> </div> </li> <li> <div class="box"> <div class="front">front</div> <div class="back">back</div> </div> </li> <li> <div class="box"> <div class="front">front</div> <div class="back">back</div> </div> </li> <li> <div class="box"> <div class="front">front</div> <div class="back">back</div> </div> </li> <li> <div class="box"> <div class="front">front</div> <div class="back">back</div> </div> </li> </ul> </body> </html>
相关文章
- Web基础 HTML CSS JS JQuery AJAX
- 【CSS进阶】试试酷炫的 3D 视角
- 【Css/Html】网页Css默认设计样式载入模板代码body.css
- CSS Modules 解决 react 项目 css 样式互相影响的问题
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
- CSS基本布局——grid布局
- CSS基础知识复习
- 通过css修改input的边框
- html+css+js写的AI五子棋游戏(附源码)
- 3天学会css视频_PHP初级 CSS教程_CSS入门教程
- CSS 盒子模型【快速掌握知识点】
- css CSS常见布局解决方案
- 《HTML与CSS入门经典(第8版)》——2.8 作业
- CSS_css sprite原理优缺点及使用
- css 去除input 获取焦点的蓝色边框
- CSS学习---css基础知识0105
- CSS学习知识整理(一)Css 简介、语法与创建
- div+Css绝对定位(absolute)和相对定位(relative)的总结
- css样式图片居中显示,不平铺