html3d上下翻转4面效果,纯CSS 3D翻转一个面（翻转导航菜单立方体）

在做练习的时候学到css的翻转导航菜单，原代码有点让人头疼，通过对其css的参数一点点研究了其实现过程。

这里推荐大家研究这个3D翻转动画的代码。

一

首先要知道坐标系的设定如下：

其次翻转关键的参数有：

perspective: 200px;

transform-style: preserve-3d;

transform: rotateX(90deg);

transform: translateZ(30px);

transition: all 1s linear;

1.设置透视属性，观察者位置在视图前200px；

2.设置是3D空间的变换效果，子元素合在一起变换；

3.设置旋转，沿X轴旋转90度，平面旋转后看到的是线；

4.设置位移，沿Z轴位移30px。

5.设置变换函数。

二

为了先初步了解，我先做一个导航图正面的翻转效果。

效果同立方体的翻转，正面翻转到顶面。立方体只旋转不位移，但是立方体的正面是发生位移的。

正面的变换原点在中心点，相对变换前的位置，变换后的位置向上位移50% 向后位移50%。

但是！css动画结束参数是根据这个面结束时的坐标的，这时候坐标系跟着变了，最后的结果是Z轴+50% Y轴-50%。

初始参数参考坐标如图一，不是根据变换后坐标写。

下图是三个参数的效果。

父元素设置：

perspective: [para]px;

变换子元素设置：

transform: rotateX(90deg) translateZ(50px) translateY(-50px);

transition: all 1s linear;

三

通过上面的例子，我就明白了啥是3D变换了。但是这个例子是单个面，而设置一个3D立体的变换怎么设呢？当然不能对每个面进行定位，太麻烦，要整体变换。

1.设置多个面的原始旋转和位移，组成一个立方体。

2.立方体盒子元素设置：transform-style: preserve-3d;

3.立方体父元素设置景深：perspective: [para]px;

4.立方体盒子元素设置变换原点：transform-origin: 50% 50% -50px;

如果不设置变换原点，修正变换后位移也行。

5.对立方体盒子元素进行整体旋转。方体盒子元素沿X轴旋转90度即可。

效果如下，第二个图是设置了 opacity: 0.5;

另外下面做个错误的稀饭

在立方体元素上设置transform-style: preserve-3d; perspective:200px;

立方体上设置景深 perspective，立方体的图形就被固定了，或者说观察位置随立方体改变。需要从上一级元素观察才行。

↓在立方体元素上同时设置transform-style: preserve-3d; perspective

↓没有设置perspective；

↓ 没有设置transform-style: preserve-3d

over

html3d上下翻转4面效果,纯CSS 3D翻转一个面（翻转导航菜单立方体）相关推荐

css 风琴,玩一下纯 CSS 折腾的一个叫什么手拉风琴的图片展示效果
原标题:玩一下纯 CSS 折腾的一个叫什么手拉风琴的图片展示效果好久没更新的公众号终于更新了,但没有太多内容,主要是也不知道写什么,更关键是已经很久没有写 CSS 的东西了,中午没吃到鸡,就一边观战 ...
html 点击加号展开代码,纯css实现加号一个的效果（代码示例）
本篇文章给大家带来的内容是关于纯css实现加号一个的效果(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现下图的加号效果: 若想实现这个效果, 只需一个p元素即可搞定. ...
html div点击选中效果,纯css实现选中切换效果
最近不太忙,多写几篇文章.很多时候我们用js来实现视觉效果,其实不用那么麻烦,掌握一些常用的css知识能让你事半功倍,这篇文章讲的是使用纯css来实现一个列表项的选中效果,希望对你有所帮助实现这个效 ...
【荐】纯CSS实现苹果MAC官方网站的菜单导航
代码简介: 苹果官方网站的菜单,实际上是看着好看,但看了代码感觉不太实用,因为为了实现这么一个效果代码太繁琐,而且菜单修改起来也极不方便,建议大家以学习的态度阅读源码. 代码内容: <!DOCT ...
[css] 使用纯css来创建一个滑块
[css] 使用纯css来创建一个滑块 .checke{position: relative;-webkit-appearance: none;width:90px;height: 44px;line ...
HTML如何实现多级水平导航栏,jQuery+css实现的蓝色水平二级导航菜单效果代码
本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格 ...
JS+CSS实现漂亮实用的红色导航菜单
代码简介: 强烈推荐一款CSS导航菜单,用到政府学校类网站上超级不错,有点类似站长网菜单的味道,只不过颜色不一样而已,这种菜单还不是真正意义上的"下拉"菜单,应该叫滑出菜单吧?反正 ...
漂亮的CSS蓝色滑动门式的导航菜单
代码简介: CSS版相当漂亮的滑动门式导航菜单,蓝色系,立体效果,设计的非常精美,希望大家能够喜欢哦.主菜单分为二级,如果想多级,可以看看代码是如何调用的,分级后菜单结构更加明淅,用户体验更好. 代码 ...
php 菜单目录树,css实现的目录树型导航菜单
我这个导航效果是在纵向导航菜单制作的基础上,加入鼠标点击主目录的显示隐藏效果,修改的是DIV代码: onClick="document.getElementByIdx_x('child1') ...

html3d上下翻转4面效果,纯CSS 3D翻转一个面（翻转导航菜单立方体）

html3d上下翻转4面效果,纯CSS 3D翻转一个面（翻转导航菜单立方体）相关推荐

最新文章

热门文章

html3d上下翻转4面效果,纯CSS 3D翻转一个面（翻转导航菜单 立方体）

html3d上下翻转4面效果,纯CSS 3D翻转一个面（翻转导航菜单 立方体）相关推荐

最新文章

热门文章

html3d上下翻转4面效果,纯CSS 3D翻转一个面（翻转导航菜单立方体）

html3d上下翻转4面效果,纯CSS 3D翻转一个面（翻转导航菜单立方体）相关推荐