HTML+CSS实现菜单的3D翻转特效

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><link rel="stylesheet" href="style.css">
</head><body><nav><div class="item"><a href="#"><p class="cn">首页</p><p class="en">INDEX</p></a></div><div class="item"><a href="#"><p class="cn">博客</p><p class="en">BLOG</p></a></div><div class="item"><a href="#"><p class="cn">关于</p><p class="en">ABOUT</p></a></div></nav>
</body></html>

CSS部分源代码如下：

:root {--background-color: #2c3e50;--color1: #7591AD;--color2: #9729ad;--color3: #db2159;
}* {margin: 0;padding: 0;
}html {font-size: 14px;
}body {width: 100vw;height: 100vh;background-color: var(--background-color);display: flex;justify-content: center;align-items: center;
}nav {width: 680px;background-color: var(--color1);
}.item {width: 200px;height: 100px;margin: 10px;float: left;perspective: 4000px;
}.item a {display: block;height: 100px;text-decoration: none;color: #fff;font-size: 1.5em;/* 开启3d */transform-style: preserve-3d;/* 通过变换角度可以发现刚才的夹角好像一个打开的笔记本电脑 *//* transform: rotateX(10deg) rotateY(10deg) translateZ(50px); *//* 增加z轴上的位移主要是为了让hover旋转式沿着夹角形成的 *//* 虚拟立方体中心轴旋转而不是当前cn元素的这一面的中心 */transform: translateZ(50px);transition: 0.5s;
}.item a p {height: 100px;line-height: 100px;text-align: center;
}.item a p.cn {background-color: var(--color2);
}.item a p.en {background-color: var(--color3);/* en元素沿顶端x轴逆向旋转90度形成于cn元素垂直的夹角，类似于形成一个缺两面的正方体*/transform: rotateX(-90deg);transform-origin: top;
}.item a:hover{/* 当鼠标移动到a元素时旋转，沿X轴旋转顺时针90度 *//* 因为当前旋转基点在夹角形成的虚拟正方体的中心，所有看起来就像旋转立方体的两个面一样 *//* 出现偏移问题是因为顺序原因，具体的后续查了下文档发现，变换动作的顺序会影响最终呈现的效果 */transform: rotateX(90deg) translateZ(50px) ;
}

HTML+CSS实现菜单的3D翻转特效相关推荐

HTML5锤子官网,锤子官网3D翻转特效banner插件
锤子官网3D翻转特效banner插件 **每次访问锤子手机官网的页面时,都会欣喜的玩耍一番那个会翻转的banner,感觉科技感十足这么有趣的效果,自己也很想试一试能否实现,于是就核心的特效做了代码的 ...
html3d上下翻转4面效果,css3麻将筛子3D翻转特效的实例教程
css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: XML/HTML ...
html css3 3d翻转,一款基于css3的散子3D翻转特效
css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: . .. ... ...
php 3d animation,CSS_纯CSS实现菜单、导航栏的3D翻转动画效果，我曾经向大家展示过闪光的logo - phpStudy...
纯CSS实现菜单.导航栏的3D翻转动画效果我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单.大家可以先看看实际效果,下面有效果截图 ...
html实现3d转换效果,教你如何用CSS实现3D翻转效果的菜单
随着浏览器技术的进步,CSS动画技术已经不是只那些简单的淡入淡出效果或幻灯片效果,它们能做很多更强大的事情.我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简 ...
html3d上下翻转4面效果,纯CSS 3D翻转一个面（翻转导航菜单立方体）
在做练习的时候学到css的翻转导航菜单,原代码有点让人头疼,通过对其css的参数一点点研究了其实现过程. 这里推荐大家研究这个3D翻转动画的代码. 一首先要知道坐标系的设定如下: 其次翻转关键的参数 ...
html5图片自动翻转特效,CSS3带动态阴影效果的3D图片翻转特效
在前不久我们讲解了CSS3 3D卡片翻转技术,在这篇文章中,我们要跟进一步,在卡片3D翻转的基础上,制作卡片的动态阴影效果.最终效果是鼠标滑过图片时,卡片会3D翻转,图片的背面显示图片的标题,在图片的 ...
html5 鼠标旋转动画效果,CSS3鼠标滑过图片3D翻转动画特效
这是一款效果非常炫酷的CSS3鼠标滑过图片3D翻转动画特效.该特效基于Bootstrap网格系统来布局,通过简单的CSS3代码,在鼠标滑过图片时对图片进行3D翻转,效果非常的酷. 使用方法 HTML结 ...
css3制作动画色子,css3实现3D色子翻转特效
css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: 复制代码代码如下: ...

HTML+CSS实现菜单的3D翻转特效

HTML+CSS实现菜单的3D翻转特效相关推荐

最新文章

热门文章