在做练习的时候学到css的翻转导航菜单,原代码有点让人头疼,通过对其css的参数一点点研究了其实现过程。
这里推荐大家研究这个3D翻转动画的代码。
一
首先要知道坐标系的设定如下:
其次翻转关键的参数有:
perspective: 200px;
transform-style: preserve-3d;
transform: rotateX(90deg);
transform: translateZ(30px);
transition: all 1s linear;
1.设置透视属性,观察者位置在视图前200px;
3.设置旋转,沿X轴旋转90度,平面旋转后看到的是线;
4.设置位移,沿Z轴位移30px。
5.设置变换函数。
二
效果同立方体的翻转,正面翻转到顶面。立方体只旋转不位移,但是立方体的正面是发生位移的。
正面的变换原点在中心点,相对变换前的位置,变换后的位置向上位移50% 向后位移50%。
但是!css动画写参数是要写这个面结束时的坐标的,这时候坐标系跟着变了,最后的结果是Z轴+50% Y轴-50%。
下图是三个参数的效果。
父元素设置 :
perspective: [para]px;
变换子元素设置:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。