简易3d导航条心得
来源:互联网 发布:电脑连接wifi网络差 编辑:程序博客网 时间:2024/06/14 10:29
简易3d导航条
html布局:
-
it
html5
-
it
html5
-
it
html5
-
it
html5
如果为
span:last-child{
transform:translateZ(-15px) translateY(-15px) rotate(90deg);
}
此时
li{
transform-style:preserve-3d;
transform:rotateX(90deg);
}
Li以X轴旋转90度,此时li的中心点在span:first-child上,所以在li转动后,会产生导航条向上平移15px的效果。
若想除去这种效果,需要将li旋转中心在两个pan组成的类立方体中心。
span:first-child{
translateZ(-15px)
}
span:last-child{
transform:translateY(-15px) rotate(90deg);
}
阅读全文
0 0
- 简易3d导航条心得
- 简易实现导航条
- Android:简易路径导航条
- html+css简易导航条
- 3D导航网格
- 3D导航标签
- 2017_7_17元素类型与转换 导航条心得
- 3D 导航栏源码
- 3D转换 导航栏
- 3D导航栏demo
- Css3-3D导航栏
- 导航条
- 导航条
- 导航条
- 导航条
- 导航条
- 导航条
- 导航条
- opencv 图像载入、显示和输出
- A
- VMware虚拟机上网络连接(network type)的三种模式--bridged、host-only、NAT
- 算法训练 猴子分苹果
- (hdu1005)Number Sequence(组合数学)
- 简易3d导航条心得
- Unicode program converted
- LightOJ1197 Help Hanzo
- 1046. Shortest Distance (20)
- 第一章 代码开发规范及其指南
- SQL SERVER2008笔记
- Unity--WWW类与协程
- 【caffe学习笔记——mnist】mnist手写数据集训练和测试
- JAVA中常见异常