3D导航栏

最新推荐文章于 2024-11-25 20:17:57 发布
最新推荐文章于 2024-11-25 20:17:57 发布
阅读量306 收藏 4
点赞数 3
CC 4.0 BY-SA版权
文章标签： 3d 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/h131425q/article/details/138534564

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            margin: 100px;

            list-style: none;

        }

        ul li {

            float: left;

            margin: 0 5px;

            width: 120px;

            height: 35px;

            /* 一会我们需要给box 旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */

            perspective: 500px;

        }

        .box {

            position: relative;

            width: 100%;

            height: 100%;

            transform-style: preserve-3d;

            transition: all .4s;

        }

        .box:hover {

            transform: rotateX(90deg);

        }

        .front,

        .bottom {

            position: absolute;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

        }

        .front {

            background-color: pink;

            z-index: 1;

            transform: translatez(17.5px);

        }

        .bottom {

            background-color: skyblue;

            /* 这个x轴一定是负值 */

            /* 有移动或者其他样式 必须先写移动 */

            transform: translatey(17.5px) rotatex(-80deg);

        }

    </style>

</head>

<body>

    <ul>

        <li>

            <div class="box">

                <div class="front">风里雨里</div>

                <div class="bottom">我在这里等你</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">风里雨里</div>

                <div class="bottom">我在这里等你</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">风里雨里</div>

                <div class="bottom">我在这里等你</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">风里雨里</div>

                <div class="bottom">我在这里等你</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">风里雨里</div>

                <div class="bottom">我在这里等你</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">风里雨里</div>

                <div class="bottom">我在这里等你</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">风里雨里</div>

                <div class="bottom">我在这里等你</div>

            </div>

        </li>


 

    </ul>

</body>

</html>

程序猫..
关注
html5css3项目6：3D的项目有两面翻转的盒子、3D导航栏、旋转木马
小黄呀呀呀的博客
05-18 950
1、两面翻转的盒子 思路： 先设置一个父盒子，然后添加两个子盒子，这两个子盒子都要设置为定位，因为这样这两个才能重叠起来，如果想要实现翻转的效果，需要实现将一个盒子旋转180度，不过这样是不够的，因为父盒子默认孩子盒子是关闭3d效果的，只要父亲一转，孩子就恢复原样，所以解决方法是在父盒子里设置transform-style，然后最后给父亲盒子旋转，即可。不过要给父盒子添加过渡的效果。 <!DOCTYPE html> <html lang="en"> <head>
3d盒子导航栏
qq_36939013的博客
09-30 571
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ ma.
css 3d导航栏
黄大仙
08-16 478
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } ul { margin: 200px .
CSS-3D导航栏
王子老师
11-06 545
每一次克制自己，都意味着比以往更强大。不去强求任何一段关系，及时很在意，很喜欢。 3D导航栏 主要知识点： 1、li标签实现多个排列 2、两个盒子，下面的盒子x轴旋转-90,再向y轴移动自身一半距离，前面的盒子向x轴移动自身一半的距离。 3、给父盒子添加 transform-style 开启3d效果 4、父元素添加perspective效果，近大远小 <!DOCTYPE html> <html lang="en"> <head> <meta chars.
3d导航栏
才不是小弱鸡的博客
09-29 595
0x00 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="topBar"> <img src="img/baidu.png" class="logo">
3D导航栏效果
07-14
在IT行业中，3D导航栏效果是一种常见的网页设计技术，旨在为用户提供更加生动、互动的浏览体验。这种效果通常应用于网站头部，使导航菜单在滚动或交互时展现出三维立体感，增强视觉冲击力，同时也提升了用户对网站...
CSS3实现的3D导航栏旋转切换特效源码.zip
11-20
【标题】"CSS3实现的3D导航栏旋转切换特效源码"，揭示了这个压缩包文件的核心内容，即一个利用CSS3技术构建的、具有3D旋转切换效果的导航栏示例。在网页设计中，导航栏是用户界面的重要组成部分，它帮助用户在网站的...
3d导航栏.html
11-07
3d导航栏，学习b站视频后模仿的。 。
CSS3 3D导航栏旋转切换代码
07-24
本篇将详细解析“CSS3 3D导航栏旋转切换代码”这一主题，探讨如何利用CSS3的transform属性来创建一个具有3D效果的动态导航栏，并在鼠标悬停时实现平滑的翻转切换。 首先，3D转换是CSS3的一个核心特性，允许元素在3D...
3d简易导航栏
weixin_45773503的博客
03-29 227
3d简易导航栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
3D 导航栏实现
qq_45287715的博客
05-11 895
3D导航栏的实现 <!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"> <tit
3D导航栏实现
非典型程序员
02-05 790
3D旋转导航 @import url("http://www.w3cplus.com/demo/css3/base.css"); /*任务一：引入本地字体文件*/ @font-face { font-family: 'sansationregular'; src: url('http://www.w3cplus.com/demo/css3/3DAnimati
css3动画导航栏3D
花花的博客
06-10 1348
源码网盘根据慕课网做的css3小特效导航栏，图标以不同方式显示页面布局 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;link rel
【前端学习之旅】3D旋转导航栏
hsx201612的博客
08-28 484
没啥好说的，来，直接上代码，很多网上的代码令人费解，我自己做了个简化版的，希望可以看懂吧，注释没写，应该过几个月我还是可以看得懂的（哈哈哈） 来！ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; * { padding: 0; margin: 0; } ....
css3 实现3D导航栏
Fantastic_liukl的博客
05-01 1337
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lianxi</title> </head> <style type="text/css"> body{ background:#ebebeb; } *{ margin:0;
Css—实现3D导航栏
最新发布
m0_64387122的博客
11-25 1455
使用css中的3D转换来实现一个酷炫的3D导航效果
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值