CSS3D导航栏翻转效果

最新推荐文章于 2024-07-07 02:59:14 发布
最新推荐文章于 2024-07-07 02:59:14 发布
阅读量328 收藏 2
点赞数 1
文章标签： html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/unravel_sky/article/details/126660269
版权
该博客展示了如何使用CSS3实现一个简单的立体翻转效果。通过设置元素的`perspective`, `transform`属性，当鼠标悬停在列表项上时，元素会沿着X轴翻转90度，展示其背面的内容。此效果可用于创建交互式的卡片或菜单项。
摘要由CSDN通过智能技术生成

效果图：

 

代码如下：

<!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>

</head>


 

<style>

    * {

        margin: 0;

        padding: 0;

    }

   

    ul {

        margin: 100px;

    }

   

    ul li {

        float: left;

        margin: 0 3px;

        width: 125px;

        height: 35px;

        list-style: none;

        perspective: 1000px;

    }

   

    .box {

        position: relative;

        width: 100%;

        height: 100%;

        transition: all 0.4s;

        /* 背面盒子保留立体空间 */

        transform-style: preserve-3d;

    }

   

    .box:hover {

        transform: rotateX(90deg);

    }

   

    .front,

    .bottom {

        position: absolute;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        color: #fff;

        text-align: center;

        line-height: 35px;

        font-size: 14px;

        border-radius: 5px;

    }

   

    .front {

        background-color: powderblue;

        z-index: 1;

        /* z轴没有定义大小所以不能设置50% */

        transform: translateZ(17.5px);

    }

   

    .bottom {

        background-color: plum;

        transform: translateY(50%) rotateX(-90deg);

    }

</style>

<body>

    <ul>

        <li>

            <div class="box">

                <div class="front">A</div>

                <div class="bottom">我突然出现</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">B</div>

                <div class="bottom">我突然出现</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">C</div>

                <div class="bottom">我突然出现</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">D</div>

                <div class="bottom">我突然出现</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">E</div>

                <div class="bottom">我突然出现</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">F</div>

                <div class="bottom">我突然出现</div>

            </div>

        </li>

    </ul>

</body>

</html>

 

unravel_sky
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android 3D圆形旋转菜单
02-10
Android 3D圆形旋转菜单Android 3D圆形旋转菜单Android 3D圆形旋转菜单Android 3D圆形旋转菜单Android 3D圆形旋转菜单Android 3D圆形旋转菜单Android 3D圆形旋转菜单Android 3D圆形旋转菜单
空间转换案例-3D导航
2201_75533641的博客
05-23 3172
3D 导航栏
CSS鼠标悬浮动画-hover属性详解
最新发布
weixin_40188886的博客
07-07 15
这篇文章主要介绍了CSS鼠标悬浮动画-hover属性详解，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧1. Grow-Shadow鼠标移入盒子放大并出现底部阴影效果：代码1<div class="box"></div>12345678910111213141516171819...
3d盒子导航栏
qq_36939013的博客
09-30 498
<!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实现翻转导航栏的效果
qq_54073865的博客
10-07 1105
{margin: 0;padding: 0;}nav{}nav ul{}nav ul li{}}}top: 0;left: 0;}}}​​​​​​​。
【每日一练】142—页面旋转显示导航栏效果的实现
web前端开发
02-22 214
今天这个效果，不是纯CSS实现的，它借助了点JavaScript技能，不过，你不懂JavaScript也没有关系，先跟着练习，一边练习一边查看相关知识点就好了。在这个练习，我们主要是想跟大家一起来练习JavaScript中的getElementById这个方法，它是JavaScript中非常重要的一个方法，也是每个学习JavaScript的小伙伴必须要掌握的方法。当然，也是比较基础的知识，希望大家...
导航栏翻转效果
yyf0409的博客
08-24 1616
* { margin: 0; padding: 0; } ul { margin: 30px 40px; } li { width: 190px; height: 50px; list-s
纯CSS实现菜单、导航栏的3D翻转动画效果
09-25
标题中的“纯CSS实现菜单、导航栏的3D翻转动画效果”指的是使用CSS样式来创建一种交互式的菜单或导航栏，当用户鼠标悬停在菜单项上时，该菜单项会进行3D翻转，呈现出不同的视觉效果。这种效果是通过CSS3的3D变换...
css3实现3D立体翻转导航特效
06-05
5. **响应式设计**：考虑到不同设备的屏幕尺寸，可能需要根据视口宽度调整3D效果，确保在各种屏幕大小下都能良好显示。 在实际编码过程中，我们可能还需要考虑浏览器兼容性问题，因为不是所有浏览器都完全支持CSS3...
CSS3 3D导航栏旋转切换代码
07-24
本篇将详细解析“CSS3 3D导航栏旋转切换代码”这一主题，探讨如何利用CSS3的transform属性来创建一个具有3D效果的动态导航栏，并在鼠标悬停时实现平滑的翻转切换。 首先，3D转换是CSS3的一个核心特性，允许元素在3D...
CSS3鼠标经过导航菜单动画效果代码
06-05
本示例中，我们将深入探讨如何使用CSS3实现鼠标经过导航菜单时的动画效果。 首先，`index.html`文件是网页的主体结构，它包含了HTML元素，如`<nav>`用于创建导航菜单，`<ul>`和`<li>`用于构建菜单项。CSS3的鼠标...
html5css3项目6：3D的项目有两面翻转的盒子、3D导航栏、旋转木马
小黄呀呀呀的博客
05-18 855
1、两面翻转的盒子 思路： 先设置一个父盒子，然后添加两个子盒子，这两个子盒子都要设置为定位，因为这样这两个才能重叠起来，如果想要实现翻转的效果，需要实现将一个盒子旋转180度，不过这样是不够的，因为父盒子默认孩子盒子是关闭3d效果的，只要父亲一转，孩子就恢复原样，所以解决方法是在父盒子里设置transform-style，然后最后给父亲盒子旋转，即可。不过要给父盒子添加过渡的效果。 <!DOCTYPE html> <html lang="en"> <head>
android 圆形菜单 3d效果图,9款精美别致的CSS3菜单和按钮
weixin_39875832的博客
05-27 358
本文作者html5tricks，转载请注明出处今天我们要来分享9款精美别致的1、超具立体感的CSS3 3D菜单 菜单项带小图标记得之前向大家分享过不少CSS3 3D菜单，比如CSS3 3D动画菜单 3D立方体菜单项和2、纯CSS3立体动画菜单 菜单项按下有内阴影这次小编来分享一款利用纯CSS3实现的立体动画菜单，该菜单的实现非常简单，并没有太多的特效渲染，但是看起来却非常干净漂亮，尤其配合灰黑色的...
css 3D导航
宁夏前端工程师，马卫斌，wx：1457508895
01-29 178
【代码】css 3D导航。
CSS案例之翻转的盒子
weixin_45336716的博客
09-03 381
<!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&gt...
3D环形旋转菜单
Mr_Shil的博客
08-12 1332
效果图 <template> <div> <div class="area" ref="area"> <div class="ball ball1"> <img ref="img" src="../../assets/bi_img/home2/icon01.png" alt="" /> </div> <div class="ball ball2">
炫酷3D感菜单
m0_58662929的博客
04-29 1179
先贴个图,效果可浏览dom 在B站看到一个纯css的菜单效果,看着不错啊 给个三连不谢,执行一贯风格,被我看到了那不就是我的了 [H5小案例] 纯CSS实现炫酷3D电竞菜单_哔哩哔哩_bilibili 草率了,代码不全! 为什么B站投的币不能收回... 正文开始 B站上所写是原生搞得,敲下来代码太多了还有一些css看不到,我这个人比较懒,那就用vue去搞一下 挂载元素 <div class="menu_css_wrap"> <starry cl...
slam与导航开发
qq_44089890的博客
04-09 1354
Gmapping是一种基于激光雷达数据的地图构建算法，可以用于建立机器人的环境地图。Gmapping算法是基于粒子滤波器（Particle Filter）的SLAM算法，它通过将机器人在环境中的位姿和地图中的特征进行联合估计，实现了机器人在未知环境中的自主定位和地图构建。Gmapping算法的优点是能够实时地构建环境地图，并且可以自适应地调整地图的分辨率和精度，以适应不同的环境和任务需求。缺点是在环境中存在大量动态障碍物时，容易出现定位漂移和地图误差等问题。
【特效】3D旋转环形菜单
dianwei5413的博客
06-05 389
主页面的xml文件 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layo...
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、付费专栏及课程。

余额充值