Css3-3D导航栏

    <ul class="all clear"><li class="box1"><a href="#"><span>home</span><span>首页</span></a></li><li class="box1"><a href="#"><span>answer</span><span>问答</span></a></li><li class="box1"><a href="#"><span>about</span><span>关于我们</span></a></li><li class="box1"><a href="#"><span>home</span><span>首页</span></a></li></ul>

<style type="text/css">li{list-style: none;}.clear{clear: both;}.all{ width: 1000px;height: 130px;border:1px #CCC solid;background: #EEE;margin: 150px auto;overflow: hidden;}.box1{width: 180px;height: 100px;float: left;margin-right: 5px;margin-top: 15px;transform-style: preserve-3d;/*perspective:1000px;*/}.box1 a,.box1 a span{display:block;width: 180px;height: 100px;text-align: center;color: white;line-height: 100px;font-size: 20px;}.box1 a span{transition:all 1s;transform-origin: 10px 1px -10px;position: absolute;top: 0;right: 0;}.box1 a span:first-child{transform:rotateX(0deg);background: #01008A;}.box1 a span:last-child{transform:rotateX(-90deg);background: #008001;}.box1 a:hover span:first-child{transform:rotateY(90deg);}.box1 a:hover span:last-child{transform:rotateY(0deg);}</style>

Css3-3D导航栏相关推荐

html+css3 3d导航栏
效果图参考于https://www.bilibili.com/video/BV1xq4y1q7jZ?p=37 如有侵权还请速速联系 1.html部分 <div class="navs ...
css3中做3D导航栏
看别人做的一个3D导航栏,觉得很厉害,这里先保存下来,后面有时间好好分析一下: <!doctype html> <html lang="en"> <h ...
H5/C3实践(2) --3D导航栏旋转木马
6.3D导航栏创建两个盒子 <div class="box"><div class-"front">111111</div> ...
前端小案例之3D导航栏
简单3D导航栏案例-鼠标经过盒子时底部盒子旋转最近入门学习前端用简单的html结构加CSS样式写了个3D导航栏的小案例在这里分享给大家. 文章目录简单3D导航栏案例-鼠标经过盒子时底部盒子旋转一 ...
3D转换 —— 两面翻转盒子和3d导航栏
3d转换和2d转换的最大区别就是,2d是二维坐标系,是平面的,而3d是三维坐标系,具有空间感.立体感.在3d转换中,有两个特别重要的属性perspective.transform - style. p ...
HTML+CSS中的3D转换translate/rotate 旋转木马/翻转盒子/3D导航栏
前面我们已经介绍过了2D转换,那么我们即将学习的3D转换又是什么呢,它跟2D转换有什么不同呢? 在我们日常生活的环境就是3D的,我们多看到的物体也都是3D的,而我们拍的照片就是3D物体在2D平面中呈现 ...
使用HTML+Css+transform实现3D导航栏-小白进阶必备
3D是three-dimensional的缩写,就是三维图形.在计算机里显示3D图形,就是说在平面里显示三维图形.不像现实世界里,真实的三维空间,有真实的距离空间.计算机里只是看起来很像真实世界,因此 ...
3D导航栏翻转(css)
先上效果图搭建html框架 <ul><li><div class="box"><div class="front"& ...
JQuery制作3D导航栏切换动画
<!-- 注意的地方 1.position 的 relative 和 absolute 联合使用的作用和效果 : absolute 绝对定位(1.默认从对窗口的左上角开始,2.也可以对某一个 d ...
利用3D效果制作立体导航栏
利用3D效果制作立体导航栏文章目录使用3D效果制作3D导航栏一.3D的旋转以及位移二.使用步骤 1.搭建html骨架 2.添加css样式前言利用3D效果制作导航栏: 制作一个好玩的3D导航 ...

Css3-3D导航栏

Css3-3D导航栏相关推荐

最新文章

热门文章