文档章节

CSS3打造3D导航

名字已被取
 名字已被取
发布于 2016/04/12 00:24
字数 1081
阅读 112
收藏 11

效果预览


分析:可以看出hover的时候是有前后两个面的翻转,并且有一个凸出效果。

HTML分析

代码如下

<ul class="block-menu">
    <li>
        <a href="#" class="three-d">
            Home            <span class="three-d-box">
                <span class="front">Home</span>
                <span class="back">Home</span>
            </span>
        </a>
    </li>

    <li>
        <a href="#" class="three-d">
            Demo            <span class="three-d-box">
                <span class="front">Demo</span>
                <span class="back">Demo</span>
            </span>
        </a>
    </li>

    <li>
        <a href="#" class="three-d">
            Deal            <span class="three-d-box">
                <span class="front">Deal</span>
                <span class="back">Deal</span>
            </span>
        </a>
    </li>

    <li>
        <a href="#" class="three-d">
            About            <span class="three-d-box">
                <span class="front">About</span>
                <span class="back">About</span>
            </span>
        </a>
    </li></ul>

<a>标签里包裹一个<span>盒子里包裹两个<span>,为效果的前后面做准备。

CSS分析

1.外观、定位

代码如下:

        *{  box-sizing:border-box;}
        .block-menu{background:black;}
        .block-menu li{display:inline-block;}
        .block-menu li a{          color:#fff;          text-decoration:none;          text-transform:uppercase;          font-size:24px;          line-height:20px;          font-weight:bold;          font-family: Arial, sans-serif;          display:block;          padding:15px 10px;        }
        .three-d{          position:relative;        }
        .three-d-box,.front,.back{          width:100%;          height:100%;          position:absolute;          top:0;          left:0;          padding:15px 10px;          background:black;        }

2.3D效果

首先创造3D环境,保留3D空间:

.three-d{perspective:200px;}.three-d-box{transform-style:preserve-3d;}

1.在three-d:hover的时候,我们让.three-d-box旋转,正面面对我们的元素向上翻转,下面有元素翻转上来,并且在翻转时有一个凸出来的效果。
2.关于这个凸出的效果,大家可以进行测试,如果一个元素是以自己的中心为中心点进行翻转时,是不会有凸出的效果。所以如果要制造一个凸出的效果,那么元素翻转的中心就一定不是自己的中心。
3.同时我们看到,在翻转的同时,元素贴回了ul所在的平面的,因此应该是在Z轴上有一定负的位移。

根据以上3点,我们可以设置3D变换:

.three-d:hover .three-d-box{    transform:translateZ(-50px) rotateX(90deg);}

在这里,我先设置translateZ而不是rotateX,是因为rotateX之后坐标轴会变换,如果先roatetXtranslateZ的话,Z轴的位移就不是垂直于ul平面(面对我们)的位移了。

由于变换时,.three-d-box有Z轴上的负位移,如果不给.front,.back设置Z轴上的位移的话,这两个平面最后不会贴回ul的平面,而是在ul平面的后面。因此,我们给.front,.back设置Z轴正方向且等于变化时的位移的距离,如此,变化时,这两个元素就会完美贴合ul所在的平面了。

.front,.back{transform:translateZ(50px);}

变换时,.back是从下面上来的,理应有一个rotateX(-90deg)的旋转。如果先translateZrotateX的话,.back所在的Y轴上的高度是<a>的一半,动画时并没有从下面上来的效果,因此,应该先rotateX变化坐标后再translateZ,这样.back就在ul的“下方”了。

.front{transform:rotateX(0deg) translateZ(50px);}.back{transform:rotateX(-90deg) translateZ(50px);}

在没有hover的情况下,由于给.front,.back设置了translateZ.front,.back看起来比正常的<a>大。为了在没有hover的情况下,.front能贴合<a>,我给.three-d设置translateZ(-50px),这样.front虽然先跟随.three-d在Z轴上有-50px的负位移,但随后translateZ(50px)又让它在Z轴上有50px的正位移,如此,便贴合了<a>.
.three-d-box{transform:translateZ(-50px);}

最后,我们为这个变化添加一个过渡的效果:
.three-d-box{transition:all .3s;}

3.注意

  1. 为了让效果明显,Z轴上的位移设置的较大值50px;在了解原理后,大家可以设置小一点的位移值,这样下方的.back就不会如此明显的看到了。

  2. hover的时候,.three-d-box旋转,它的子元素旋转的中心点是.three-d-box的中心点而不是子元素自己的中心点哦~这样你才能看到有凸出的效果。

  3. hover的时候是会覆盖原来的样式,所以hover时,原始状态是.three-d-box在Z轴的位移是0,.front,.back在Z轴的位移是50px;hover的时候以此为起点进行变换。

最终3D相关代码如下:

.three-d{perspective:200px;}.three-d-box{    transform-style:preserve-3d;    transform:translateZ(-25px);    transition: all .3s ; }.front{transform:rotateX(0deg) translateZ(25px);}.back{transform:rotateX(-90deg) translateZ(25px);}.three-d:hover .three-d-box{    transform: translateZ(-25px) rotateX(90deg);}

总结

  1. 这个例子很好的说明了,一定要注意变换的中心点

  2. 父元素变换时,子元素是以父元素的中心点为中心点变换的,而不是自己。


本文转载自:

名字已被取
粉丝 3
博文 44
码字总数 4065
作品 0
杭州
网页/平面设计
私信 提问
8 款极具表现力的jQuery/CSS3网页菜单

上一篇我向大家分享了7款效果震憾的HTML5应用组件,今天主要来分享一下CSS3网页菜单,因为在一个网站中,菜单起着举足轻重的作用,所以作为WEB开发人员,我们有必要将网站的菜单设计得尽量完...

yykj
2013/07/03
5.5K
16
精选7款绚丽的HTML5和jQuery图片动画特效

在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器、图片导航、3D图片动画等等。本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面、实...

yykj
2012/11/14
39.8K
19
10大经典CSS3菜单应用欣赏

很多时候,我们的网页菜单需要个性化,从而来适应各种行业的用户视觉操作体验。本文将带领大家一起来欣赏10个非常经典的CSS3菜单应用,菜单涉及到动画菜单、Tab菜单、面包屑菜单等。 1、CSS...

boy22funny
2015/03/12
14
0
9款超绚丽的HTML5/CSS3应用和动画特效

HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验。今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单、按钮、图片...

切切歆语
2017/10/23
629
0
5 个简单实用的 CSS3 Tab 菜单

Tab菜单是一种比较特殊的菜单,和其他菜单不同,Tab菜单更多的是帮助用户在更狭小的范围内导航所要阅读的内容,通过对Tab页的切换,用户可以在有限的空间内找到更多感兴趣的内容。下面给大家...

tp_wire
2012/07/09
3.3K
4

没有更多内容

加载失败,请刷新页面

加载更多

Docker 可视化管理 portainer

官网安装指南: https://portainer.readthedocs.io/en/latest/deployment.html docker-compose.yml 位置,下载地址:https://downloads.portainer.io/docker-compose.yml...

Moks角木
46分钟前
5
0
Spring Security 实战干货:必须掌握的一些内置 Filter

1. 前言 上一文我们使用 Spring Security 实现了各种登录聚合的场面。其中我们是通过在 UsernamePasswordAuthenticationFilter 之前一个自定义的过滤器实现的。我怎么知道自定义过滤器要加在...

码农小胖哥
49分钟前
7
0
常见分布式事务解决方案

1 微服务的发展 微服务倡导将复杂的单体应用拆分为若干个功能简单、松耦合的服务,这样可以降低开发难度、增强扩展性、便于敏捷开发。当前被越来越多的开发者推崇,很多互联网行业巨头、开源...

asdf08442a
49分钟前
3
0
influxdb continuous queries(cq)从入门到放弃

从前一篇influxdb的文章prometheus基于influxdb的监控数据持久化存储方案完成之后,就一直在折腾influxdb发布测试和生产环境的问题,经过接近2个月的验证,最终发现使用influxdb自带cq的方案...

狗陈
今天
7
0
7.线程通信

在现实生活中,如果一个人团队正在共同完成任务,那么他们之间应该有通信,以便正确完成任务。 同样的比喻也适用于线程。 在编程中,要减少处理器的理想时间,我们创建了多个线程,并为每个线...

Eappo_Geng
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部