CSS3实现3d菜单翻转

最新推荐文章于 2024-04-06 09:01:22 发布
最新推荐文章于 2024-04-06 09:01:22 发布
阅读量541 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HY909475/article/details/88408315
版权

CSS3实现3d菜单翻转

 

transform-style:flat | preserve-3d；

3d透视属性。针对子元素如何在3d空间相对其父元素渲染，这个属性声明在父元素上，并且他的子元素使用了transform才会有效。有两个属性值，一个是flat平面，这也是默认值；一个是preserve-3d当子元素使用transform时，保留其3d的位置也就是3d透视。本示例3d菜单翻转动画中，使用了transform的3d变形属性，包括旋转和移动。当鼠标移入该菜单，该元素做3d翻转动画；鼠标离开后，还原至初始状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3实现3d菜单翻转</title>
    <style type="text/css">
        .nav{
            width: 980px;
            margin: 50px auto;
            background-color: #fdfdfd;
            border: 1px #cccccc solid;
        }
        .nav:after{
            /*本段css主要是解决header标签中的子元素因为浮动而未将header高度撑起来的问题*/
            clear: both;
            display: block;
            overflow: hidden;
            content: "";
        }
        .nav .item{
            width: 200px;
            height: 100px;
            float: left;
            border-right: 5px #333333 solid;
            /*3d元素距离视图的距离，当元素设置perspective时，它的子元素会获得一个透视的效果，而不是元素的本身
            其实就是z轴的距离，从屏幕到屏幕里面的距离*/
            -webkit-perspective: 4000px;
            -moz-perspective: 4000px;
            perspective: 4000px;
        }
        .nav .item:last-child{
            border-right: none;
        }
        .nav .item a{
            display: block;
            height: 100px;
            /*去掉超链接默认的下边线*/
            text-decoration: none;
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        .nav .item a p{
            height: 100px;
            margin: 0;
            /*设置行高，设置文字距上距下的高，包括文字的高度。这里与height同高，即垂直方向居中*/
            line-height: 100px;
            color: #ffffff;
            text-align: center;
            font-size: 20px;
            font-famiy: "Microsoft Yahei";
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;
        }
        .nav .item a p:first-child{
            background-color: #009900;
            -webkit-transform: translateZ(50px);
            -moz-transform: translateZ(50px);
            -ms-transform: translateZ(50px);
            -o-transform: translateZ(50px);
            transform: translateZ(50px);
        }
        .nav .item a p:last-child{
            background-color: #000099;
            -webkit-transform: translateZ(50px) rotateX(-90deg);
            -moz-transform: translateZ(50px) rotateX(-90deg);
            -ms-transform: translateZ(50px) rotateX(-90deg);
            -o-transform: translateZ(50px) rotateX(-90deg);
            transform: translateZ(50px) rotateX(-90deg);
            margin-top: -50px;
        }
        .nav .item a:hover{
            -webkit-transform: rotateX(90deg);
            -moz-transform: rotateX(90deg);
            -ms-transform: rotateX(90deg);
            -o-transform: rotateX(90deg);
            transform: rotateX(90deg);
        }
        .nav .item a:hover p:last-child{
            margin-top: 0;
            -webkit-transform: translateZ(0) rotateX(-90deg);
            -moz-transform: translateZ(0) rotateX(-90deg);
            -ms-transform: translateZ(0) rotateX(-90deg);
            -o-transform: translateZ(0) rotateX(-90deg);
            transform: translateZ(0) rotateX(-90deg);
        }
    </style>
</head>
<body>
    <header class="nav">
        <div class="item">
            <a href="#">
                <p>首页</p>
                <p>Home</p>
            </a>
        </div>
        <div class="item">
            <a href="#">
                <p>问答</p>
                <p>Q &amp A</p>
            </a>
        </div>
        <div class="item">
            <a href="#">
                <p>关于我们</p>
                <p>About us</p>
            </a>
        </div>
    </header>
</body>
</html>

 

posted @ 2018-01-29 21:56 小白知浅 阅读( ...) 评论( ...) 编辑 收藏
小白知浅
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3实现立体菜单
u013742084的专栏
05-31 617
html结构： Home About Servics Portfolio Blog Contact CSS3： * { margin:0; padding: 0; font-family: 'Microsoft
CSS3 | Transition 下拉菜单
liuj4 | 自娱自乐
08-31 777
Transition (过渡) 是CSS3的新特性，可以让元素的height/width/scale等属性在变化时能平滑的过渡，我也是第一次用，实现了一个下拉菜单功能。 <div class="container"> <div class="menu1"> <span>鞋子</span> <div c...
纯CSS3炫酷3D菜单 菜单项3D旋转动画
04-16
解压密码：RJ4587 不久前，我们刚刚为大家分享过很多外观各异的CSS3菜单，很多都是比较实用的，比如这款jQuery/CSS3波浪形弹性下拉菜单就非常具有创意，也很实用。今天要介绍的也是一款基于纯CSS3的3D菜单，当我们将鼠标滑过菜单项时，菜单项就会实现3D的旋转动画，另外菜单项是垂直的显示的。
HTML+CSS实现菜单的3D翻转特效
道阻且长，行则将至。
12-27 589
HTML+CSS实现菜单的3D翻转特效 效果图如下： HTML部分源代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>翻转特效</title>
CSS实现3D菜单效果【每日一题】
功能总结
07-07 215
以下是今天小练习的最终效果，代码，我贴在下面了，大家可以自行练习。HTML完整代码： CSS完整代码： 以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我...
大饱眼福 7款类型各异的CSS3实用菜单
weixin_33778778的博客
04-01 164
在网站上应用一款具有表现力和用户体验的网页菜单非常重要，如果你的网站很现代，那么请利用HTML5和CSS3来完成菜单功能，因为这会让你的网站变得非常有活力。下面分享的7款类型各异的CSS3实用菜单将会给你一些设计灵感，欢迎收藏。 1、清新小图标的HTML5/CSS3侧边栏菜单 之前我们分享过几款CSS3侧边栏菜单，像CSS3侧边栏菜单 带可爱的小图标菜单和CSS3侧边栏手风琴菜单，都非常不...
手把手教你用CSS实现一个VR 3D游戏菜单栏效果，前端开发框架
最新发布
2401_84092360的博客
04-06 718
点击这里即可免费获取，包括答案解析。**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。[外链图片转存中…(img-pPnMADnN-1712365229239)][外链图片转存中…(img-eA8LSibI-1712365229240)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
纯CSS实现菜单、导航栏的3D翻转动画效果
09-25
总结来说，这个3D翻转菜单的实现利用了CSS3的特性，包括3D变换（transform: rotateX, translateZ）、透视（perspective）、过渡（transition）和相对定位。这种技术使得开发者能够创建富有动态感和交互性的用户体验...
css3 3d翻转导航菜单鼠标悬停菜单3D翻转动画效果代码
11-21
css3 3d翻转导航菜单鼠标悬停菜单3D翻转动画效果代码 css3 3d翻转导航菜单鼠标悬停菜单3D翻转动画效果代码 css3 3d翻转导航菜单鼠标悬停菜单3D翻转动画效果代码 css3 3d翻转导航菜单鼠标悬停菜单3D翻转动画效果代码
CSS3 3D样式导航菜单代码
06-05
【CSS3 3D样式导航菜单代码】是一种利用现代浏览器对CSS3的支持，构建出具有三维立体视觉效果的网页导航菜单的技术。这种技术为网页设计带来了丰富的动态效果和交互体验，使得用户在浏览网站时能感受到更为生动和引...
css3导航菜单鼠标滑过特效下拉菜单翻转动画效果代码
11-19
css3导航菜单鼠标滑过特效下拉菜单翻转动画效果代码 css3导航菜单鼠标滑过特效下拉菜单翻转动画效果代码 css3导航菜单鼠标滑过特效下拉菜单翻转动画效果代码 css3导航菜单鼠标滑过特效下拉菜单翻转动画效果代码
css3 3d旋转下拉菜单
01-10
自己手写的，没有多余代码，非常简单易懂，css3的3d旋转下拉菜单
css3-实现3d菜单按钮效果
07-09
CSS3制作的非常漂亮的3D菜单按钮效果！
css3超酷3D旋转导航菜单特效
07-08
css3超酷3D旋转导航菜单特效
3D菜单特效(CSS3)
08-16
3D菜单特效(CSS3)
css3的图形3d翻转效果应用示例
09-25
本示例主要讲解了如何利用CSS3实现图形的3D翻转效果，通过以下几个关键知识点来实现这一效果： 1. **透视(perspective)**：为了创建3D效果，首先需要设置一个透视属性。`perspective`值决定了观察者距离元素的远近...
css3 3D下拉菜单特效代码
03-20
本知识点主要聚焦于使用CSS3实现的3D下拉菜单特效代码，这是一种利用3D翻转效果增强用户交互体验的UI设计。 首先，3D下拉菜单的核心在于CSS3的3D转换属性。这些属性包括`transform`, `perspective`, `rotateX`, `...
手把手教你用CSS实现一个VR 3D游戏菜单栏效果
前端仙人的博客
12-26 2867
3D游戏菜单组件 关于如何建立一个响应性、适应性和无障碍的3D游戏菜单的基础性概述。 在这篇文章中，我想带着大家写一个3D游戏菜单组件的案例。首先让我们看看成品是什么样子的 概述 相信大家都玩过赛博朋克吧，最近正好迷上了这个游戏，里面的菜单栏深深引起了我的注意，特别是在新的AR/VR游戏中，让菜单看起来漂浮在空间中也是很炫的事情。今天我们讲重现这种效果的精髓，但要加上自适应和色彩方案。 我们会使用实验性的CSS @custom-media和@nest来防止重复的媒体查询，并将媒体查询集中在组件样式块中。
html3d扇形菜单,前端网站CSS扇形菜单
weixin_29608291的博客
06-15 280
/p>#sector {position: relative;overflow: hidden;width: 200px;height: 100px;margin: 150px auto;background-color: #ddd;border-top-left-radius: 100px;border-top-right-radius: 100px;}#sector ul li {lis...
css实现导航条3d翻转变色
08-04
### 回答1： 可以使用CSS3的transform和transition属性来实现导航条的3D翻转效果，同时结合伪类:hover来实现鼠标悬停时的颜色变化。 下面是一个简单的示例代码： HTML： ``` <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> ``` CSS： ``` nav ul { list-style: none; margin: 0; padding: 0; display: flex; } nav li { width: 100px; height: 50px; margin: 10px; position: relative; perspective: 1000px; } nav a { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform-style: preserve-3d; transition: all 0.5s; } nav a:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #333; transform: rotateY(0deg); transform-origin: left; transition: all 0.5s; } nav a:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; transform: rotateY(-90deg); transform-origin: right; transition: all 0.5s; } nav li:hover a:before { transform: rotateY(90deg); background-color: #f00; } nav li:hover a:after { transform: rotateY(0deg); background-color: #f00; } ``` 解析： - 给ul标签设置display: flex;，让li标签排列为一行。 - 给li标签设置宽高、margin等样式，并设置perspective属性来产生3D视觉效果。 - 给a标签设置display: block;、宽高100%、position: absolute;等样式，并设置transform-style: preserve-3d;来启用3D变换。 - 使用:before和:after伪类来制作导航条的不同面，同时设置背景色和transform属性来实现3D翻转效果。 - 使用:hover伪类来监听鼠标悬停事件，并设置对应的transform值和背景色来实现颜色变化。 ### 回答2： 要实现导航条的3D翻转变色效果，可以采用CSS中的transform属性和transition属性。 首先，确保导航条的HTML结构已经创建好，例如使用一个ul元素和若干li元素来表示导航菜单。 然后，在CSS中为导航条添加以下样式： ```css .navbar { perspective: 1000px; /* 设置视角距离 */ } .navbar li { transform-style: preserve-3d; /* 设置3D效果保留 */ transition: transform 0.5s; /* 设置过渡效果时间 */ } .navbar:hover li { transform: rotateY(180deg); /* 鼠标悬停时翻转180度 */ } .navbar li:nth-child(even) { background-color: #ffcc00; /* 偶数位置的li元素背景色 */ } .navbar li:nth-child(odd) { background-color: #ff9900; /* 奇数位置的li元素背景色 */ } ``` 以上代码中： `.navbar` 类选择器用于选择导航条容器元素，并通过 `perspective` 属性设置视角距离，达到3D效果。 `.navbar li` 选择器用于选择导航条中的 li 元素，并通过 `transform-style` 属性设置3D效果保留。接着使用 `transition` 属性设置过渡效果时间，使翻转过程具有平滑的动画效果。 `.navbar:hover li` 选择器用于在鼠标悬停时，对导航条中的所有 li 元素应用翻转效果。 `.navbar li:nth-child(even)` 和 `.navbar li:nth-child(odd)` 选择器用于为导航条中的偶数位置和奇数位置的 li 元素设置不同的背景色。 这样，当鼠标悬停在导航条上时，导航条会以3D翻转的效果展示，并且偶数位置的 li 元素背景色为黄色，奇数位置的 li 元素背景色为橙色。 ### 回答3： 要实现导航条的3D翻转效果并能够改变颜色，可以使用CSS的transform属性结合动画效果以及透明度属性。下面是一种实现方式： HTML部分： ```html <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">服务</a></li> <li><a href="#">关于我们</a></li> </ul> </nav> ``` CSS部分： ```css nav ul { list-style: none; margin: 0; padding: 0; display: flex; } nav li { margin: 10px; padding: 10px; background-color: #ccc; transform-style: preserve-3d; /* 开启3D翻转效果 */ transition: transform 0.5s, background-color 0.5s; /* 添加动画效果 */ } nav li:hover { transform: rotateY(180deg); /* 使元素沿Y轴翻转180度 */ background-color: #ff0000; /* 鼠标悬停时改变背景颜色 */ } nav a { text-decoration: none; color: #000; } nav a:hover { text-decoration: underline; } ``` 通过上述CSS代码，实现了导航条每个选项的3D翻转效果以及鼠标悬停时的背景颜色改变。当鼠标悬停于导航选项上时，该选项会以Y轴为轴心进行180度翻转，并且背景颜色会从原来的灰色变为红色；当鼠标离开时，选项会恢复原来的状态。其中，transition属性用于添加翻转效果的动画，transform属性用于实现3D翻转效果，background-color属性用于改变背景颜色，而a标签则用于设置文字样式。这样就实现了一个带有3D翻转和背景色变化效果的导航条。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值